Internet Explorer IE7 + IE8在逗号分隔的选择器列表中忽略具有nth-child的CSS规则 [英] Internet Explorer IE7 + IE8 ignoring CSS rule with nth-child in comma separated selector list

问题描述

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

问题：为什么IE7 / IE8不是

示例标记如下所示：

 < table> 
< caption>地球上的东西< / caption> 
< tbody> 
< tr class =odd>< td>猴子< / td>< / tr> 
< tr>< td>网球< / td>< / tr> 
< tr class =odd>< td>冰箱磁铁< / td>< / tr> 
< tr>< td>幽默< / td>< / tr> 
< / tbody> 
< / table> 
  

Boiled-down示例CSS如下所示：

  tr.odd {
 background-color：red; 
} 
 
 tr.odd，div：nth-​​child（odd）{
 background-color：blue; 
} 
  

Chrome，FF和IE9 +如预期的，因为将其设置为蓝色的规则发生在文档的后面，并具有相等的特异性。但IE7和IE8渲染它们在红色！因为IE7（2006年发布）和IE8（2009年发布）不明白，所以为什么IE不应用第二条规则？

解决方案

nth-child （添加到CSS 2010），他们似乎将第二个规则中的第二个选择器视为错误。它的响应是忽略整个规则，包括其认为有效的其他选择器。尽管第n个孩子被附加到不同的选择器。这是一个奇怪的决定，开发人员忽略整个规则，而不只是它认为无效的选择器。

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

  tr.odd {
 background-红色; 
} 
 
 tr.odd {
 background-color：blue; 
} 
 
 / * IE7和IE8将忽略整个规则* / 
 div：nth-​​child（odd）{
 background-color：blue; 
} 
  

注意：请不要一个聪明的，建议删除第一个规则。显然，在这样一个简单的例子中，它是剩余，但这是一个巨大的项目，其中CSS连接到文档的末尾需要重写以前的规则的彻底截断版本。

I just spent an hour debugging a strange CSS bug that was occuring in IE7 and IE8 and wanted to share my findings:

Question: Why is IE7/IE8 not picking up the later rule and overwriting the previous one?

Example markup looks as follows:

<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>

Boiled-down example CSS looks like this:

tr.odd{
    background-color: red;
}

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

Chrome, FF and IE9+ render table rows with the class 'odd' in blue as expected, because the rule setting it to blue occurs later in the document and has equal specificity. But IE7 and IE8 render them in red! So why is IE not applying the second rule?

解决方案

Because IE7 (released 2006) and IE8 (released 2009) do not understand nth-child (added to CSS 2010) they seem to be treating the second selector in the second rule as an error. It's response is to ignore the whole rule including the other selectors which it considers valid. Despite nth-child being appended to a different selector. It is a strange decision by the developers to ignore the whole rule, rather than just the selector that it considers invalid.

Re-writing the CSS as follows will separate selectors added after IE7/IE8 from the ones that existed before and thus solve the problem:

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;
}

Note: Please do not be a smart-arse and suggest removing the first rule. Obviously in such a boiled-down example it is surplus but this is a drastically truncated version of a huge project in which CSS concatenated to the end of the document was required to override previous rules.

这篇关于Internet Explorer IE7 + IE8在逗号分隔的选择器列表中忽略具有nth-child的CSS规则的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！