html - css 属性 tr:nth-child(even) 在 IE 8 上不起作用

Question

我无法使用tr:nth-child(even)IE8 上的 css 属性在 html 表中设置备用行。是否有适用于 IE8 的该指令的替代方法？如果可能的话，我怎样才能达到同样的效果？

演示：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 不支持nth-child()CSS 中的选择器。

您有以下选择：

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

2. 使用诸如IE9.js或Selectivizr之类的 javascript polyfill ，它将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 用户来说，仅仅没有得到条纹可能不是世界末日。如果站点中的其他所有内容都正常，他们甚至可能不会错过它。如果他们确实错过了，您可以告诉他们升级浏览器。

Answer 4

尝试这个

将此代码粘贴到您的 head 标签中

  <!--[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");

或者

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

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

Answer 5

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