IE8 和 jQuery 选择器答案

【问题标题】：IE8 and jQuery selectorsIE8 和 jQuery 选择器
【发布时间】：2011-03-17 23:02:24
【问题描述】：

今天我注意到 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 中，它们没有被分配一个“奇数”类，也没有突出显示。

【问题讨论】：

【解决方案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;
}

【讨论】：

尼克，非常感谢您的修复。它像魔术一样工作。 IE8 的行为方式确实令人费解，因为对于其他伪选择器，它不会发生。例如，当我在 jQuery 中使用 first-child 和 last-child 伪选择器时，它仍然可以按预期工作。再次感谢！
@teddyrised - 欢迎 :) 我不知道为什么 IE 会这样，我只是将它添加到它做错的 50,000 件事情的列表中。顺便说一句，请务必接受答案以结束问题/帮助下一个在 google 上找到此问题的人 - 通过左侧的复选标记 :)
啊，非常感谢您的帮助。尽管我一直潜伏在附近，但我仍然是堆栈溢出的新手。谢谢！
IE8 实际上是遵循这里的样式表中的选择器解析标准。由于它不支持:nth-child()，it has to discard the entire CSS rule altogether。

【解决方案2】：

这在 ie8 和 ie9 中对我有用，首先你需要 2 个具有背景颜色的类

.even { background-color: white; } 
.odd { background-color: #ff0; }

然后用jquery find tr:odd add tr:even 并添加对应的类

$(document).ready(function () {
        $('#table1').find('tr:odd').addClass("odd"); 
        $('#table1').find('tr:even').addClass("even"); 
});

【讨论】：