css属性tr：nth-​​child（偶数）在IE 8上不起作用

Question

我无法使用IE8上的css属性tr:nth-child(even)在html表中设置备用行。 是否可以使用适用于IE8的此指令？如果只使用css，我如何才能达到相同的效果？

演示：http://jsfiddle.net/q3Uuz/2/

tr:nth-child(even) {background-color:#F4F4F4;}

Answer 1

然而今天我不得不为Intranet网页设置备用表行的样式，考虑到IE8。

如果你想使用纯CSS（没有标记更改或JavaScript），你可以使用相邻的兄弟组合器：

/* For the odd rows: */
table.alternate tr:first-child,
table.alternate tr:first-child + tr + tr,
table.alternate tr:first-child + tr + tr + tr + tr,
table.alternate tr:first-child + tr + tr + tr + tr + tr + tr,
table.alternate tr:first-child + tr + tr + tr + tr + tr + tr + tr + tr,
table.alternate tr:first-child + tr + tr + tr + tr + tr + tr + tr + tr + tr + tr,
table.alternate tr:first-child + tr + tr + tr + tr + tr + tr + tr + tr + tr + tr + tr + tr {
/* …and so on  */
background: #eaf3fa}

/* For the even rows: */
table.alternate tr:first-child + tr,
table.alternate tr:first-child + tr + tr + tr,
table.alternate tr:first-child + tr + tr + tr + tr + tr,
table.alternate tr:first-child + tr + tr + tr + tr + tr + tr + tr,
table.alternate tr:first-child + tr + tr + tr + tr + tr + tr + tr + tr + tr,
table.alternate tr:first-child + tr + tr + tr + tr + tr + tr + tr + tr + tr + tr + tr,
table.alternate tr:first-child + tr + tr + tr + tr + tr + tr + tr + tr + tr + tr + tr + tr + tr
/* …and so on  */  {
    background: #fff}

有关相邻兄弟选择器的更多信息： http://css-tricks.com/child-and-sibling-selectors/

Answer 2

IE8不支持正弦:nth-child，您需要更改标记。

定义一个类.odd或.even并将该类应用于标记中的每一行。

然后改变你的css：

tr:nth-child(even), .odd 
{
    background-color:#F4F4F4;
}

Answer 3

它是IE8中不支持的CSS3样式属性。您将不得不使用其他方式来支持IE8，如类或ID。看看这里，浏览器支持的内容和内容http://caniuse.com/#search=NTH

Answer 4

试试这个

将此代码粘贴到您的头标记

中

  <!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->

JAVASCRIPT

$("#gridAndDetail tr:odd").css('background-color','red');
$("#gridAndDetail tr:even").css('background-color','#F4F4F4');

或者您可以使用css类文件

$("#gridAndDetail tr:odd").addClass("odd");
$("#gridAndDetail tr:even").addClass("even");

OR

根据您的理解，请阅读此链接

http://reference.sitepoint.com/css/understandingnthchildexpressions

Answer 5

正如其他人所说，IE8不支持CSS中的nth-child()选择器。

您有以下选择：

1. 重构代码以使用替代方法而不是nth-child()。也许只需在相关元素中添加一个类。

2. 使用javascript polyfill，例如IE9.js或Selectivizr，将nth-child()选择器（和其他人）反向移植到IE8。

3. 使用jQuery或支持nth-child()的类似库来设置样式，而不是在CSS中进行。

4. 放弃对IE8的支持。

您决定使用哪些选项将取决于您的重要性。

如果您的代码在其他浏览器中运行，并且您需要在IE8中使用最少量的额外工作，那么我建议您尝试使用Selectivizr库。或IE9.js.但我建议先尝试选择Selectivizr，因为IE9.js会对浏览器做很多其他可能会影响您网站的内容。

如果您不想为此使用Javascript库但仍需要IE8支持，那么您需要选择选项1并重构您的代码。根据代码的结构和代码的数量，这可能会或可能不会很多。当CSS在那里时，必须向后迈出一步，这有点遗憾。

选项4听起来像是最差的选项，但可能比听起来更合适。如果将nth-child样式用于像斑马条纹这样的东西，那么IE8用户可能不会因为没有条纹而成为世界末日。如果网站上的其他内容都可以正常工作，他们甚至可能都不会错过它。如果他们错过了，你可以告诉他们升级他们的浏览器。