CSS表格替换行不在资源管理器中绘制,但适用于Mozilla,Chrome和Opera

时间:2011-06-27 12:05:02

标签: css

当我输入css文件行时

.properties_table tr:nth-child(even) {background: #CCC;}
.properties_table tr:nth-child(odd) {background: #FFF;}
在Mozilla,Opera和Chrome中,它看起来不错,但它没有在Explorer 8中显示(我只在IE 8上测试过)。 需要看起来像这样 enter image description here

但看起来像这样

enter image description here

有没有人有建议?

5 个答案:

答案 0 :(得分:4)

IE8不支持

nth-childhttp://caniuse.com/#search=nth-child

尝试定义oddeven类,并在css中将给定的样式应用于它们。

答案 1 :(得分:3)

不幸的是,

nth-child()在IE8中是not supported

如果你可以使用jQuery,可以使用jQuery :nth-child()选择器对备用行进行着色,以使用JavaScript而不是本机CSS为行着色。

除非IE8是您的主要目标浏览器,或者确实想要所有浏览器的彩色行,否则我会采用progressive enhancement策略。允许支持:nth-child的浏览器为行着色并让旧版浏览器无法解决问题。我怀疑该页面在没有着色的情况下仍然是完全可读的,并且为所有缺少CSS的浏览器实现变通方法或替代解决方案的工作量大大减少。

答案 2 :(得分:2)

IE 8不支持此选择器。你将不得不在每一行上添加类似“奇数”和“偶数”类的东西,并使用类似的选择器:

.properties_table tr.odd {background:#ccc;}

或者您必须使用脚本来添加类,但这可能会导致无格式内容的闪现,和/或减慢页面速度。

我个人的偏好是不使用旧浏览器的代码,如果只是造型问题,但IE8有点太新了不容忽视 - 拥有Windows XP的人永远不会知道更好的IE版本。这就是我们讨厌IE的原因。

答案 3 :(得分:0)

nth-children属性与任何IE版本不兼容(直到8.0,不知道大约9)你可以在javascript-jquery中检查一些东西来改变背景属性

答案 4 :(得分:0)

IE8不支持CSS3选择器,只支持IE9且仍然有限度,

您可以在IE 8及以下版本中使用javascript备份。

石蕊测试将告诉您需要了解的与每个浏览器的兼容性:

http://findmebyip.com/litmus/

另一个选择是使用特定的类.even.odd并适当地设置样式......

.properties_table tr.even {background: #CCC;}
.properties_table tr.odd {background: #FFF;}

这也是一个很好的资源:

http://kimblim.dk/css-tests/selectors/