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中突出显示.

---

这个问题的一个例子就是这里可以看到的问题 - 例如24个例子.在Firefox,Chrome,Safari和Opera中,奇数行被分配了一个"奇数"类.但是,在IE8中,它们未被分配"奇数"类,并且未突出显示.

Answer 1

选择器在jQuery端正常工作......但是IE8完全丢弃了样式规则(符合规范),因为它无法识别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;
}

这是原始版本(IE8删除的单个规则),这是一个固定的示例,规则拆分.

为了完整起见,扭转了规则这样 不帮助:

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