jquery - IE8 和 jQuery 选择器

Question

今天我注意到 jQuery 选择器和 addClass() 函数的组合在 IE8 上不能正常工作。

例如，当我要确保在表格中选择偶数行时，我写道:

jQuery(document).ready(function($){
    $("#table1 tr:nth-child(even)").addClass("even");
}

对于 CSS，我写道:

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

在 Firefox、Chrome、Safari 和 Opera 中，即使 CSS 文件中没有伪类选择器，偶数行也会被选中。然而，在IE8中，情况并非如此。这些行没有不同的背景颜色。

这很奇怪，因为当我使用时:

jQuery(document).ready(function($){
    $("#table1 tr:nth-child(even)").css({"background-color":"#ff0"});
}

所选行在 IE8 中突出显示。

---

问题的一个例子是问题可以在这里看到 - 24ways example .在 Firefox、Chrome、Safari 和 Opera 中，奇数行被指定为“奇数”类。但是，在 IE8 中，它们没有被分配到“奇数”类，也没有突出显示。

Answer 1

选择器在 jQuery 方面可以正常工作...但是 IE8 完全放弃样式规则(符合 the specification )，因为它不识别 nth-child:

tr:nth-child(odd) td, tr.odd td {
  background-color: #86B486;
}

如果你拆分它，它会正常工作:

tr:nth-child(odd) td {
  background-color: #86B486;
}
tr.odd td {
  background-color: #86B486;
}

Here's the original version (IE8 删除了一条规则)和 here's a fixed sample , 规则拆分。

---

为了完整起见，颠倒规则like this 没有帮助:

tr.odd td, tr:nth-child(odd) td {
  background-color: #86B486;
}