Question

我花了一个小时调试IE7和IE8中出现的一个奇怪的CSS错误，想分享我的发现：

问题：为什么IE7 / IE8没有采用后面的规则并覆盖之前的规则？

示例标记如下所示：

<table>
    <caption>Things on planet Earth</caption>
    <tbody>
        <tr class="odd"><td>Monkeys</td></tr>
        <tr><td>Tennis</td></tr>
        <tr class="odd"><td>Fridge Magnets</td></tr>
        <tr><td>Humous</td></tr>
    </tbody>
</table>

简化示例CSS如下所示：

tr.odd{
    background-color: red;
}

tr.odd, div:nth-child(odd){
    background-color: blue;
}

Chrome，FF和IE9 +按预期呈现蓝色类为“奇数”的表行，因为将其设置为蓝色的规则发生在文档的后面，具有相同的特异性。但IE7和IE8将它们呈现为红色！那么为什么IE不应用第二条规则呢？

Answer 1

因为IE7（2006年发布）和IE8（2009年发布）不理解nth-child（添加到CSS 2010），他们似乎将第二个规则中的第二个选择器视为错误。它的回应是忽略整个规则，包括它认为有效的其他选择器。尽管nth-child被附加到不同的选择器。开发人员忽略整个规则是一个奇怪的决定，而不仅仅是它认为无效的选择器。

重写CSS如下将IE7 / IE8之后添加的选择器与以前存在的选择器分开，从而解决问题：

tr.odd{
    background-color: red;
}

tr.odd{
    background-color: blue;
}

/* IE7 and IE8 will ignore this entire rule */
div:nth-child(odd){
    background-color: blue;
}

注意：请不要聪明，并建议删除第一条规则。显然，在这样一个煮沸的例子中，它是多余的，但这是一个巨大的项目的大幅截断版本，其中连接到文档末尾的CSS需要覆盖以前的规则。

Internet Explorer IE7 + IE8在逗号分隔的选择器列表中忽略带有nth-child的CSS规则

1 个答案: