css3 - Internet Explorer IE7 + IE8 ignoring CSS rule with nth-child in comma separated selector list -


I was just debugging a strange CSS bug that happened in IE 7 and IE 8 and wanted to share my findings. Was:

Question: Why IE7 / IE8 is not raising the rules later and overwriting the previous one?

The example markup looks like: 

  & lt; Table & gt; & Lt; Captions & gt; Things on planet Earth & lt; / Caption & gt; & Lt; Tbody & gt; & Lt; Tr square = "weird" & gt; & Lt; Td> Monkey & lt; / Td> & Lt; / Tr & gt; & Lt; TR & gt; & Lt; TD & gt; Tennis & lt; / TD & gt; & Lt; / TR & gt; & Lt; Tr square = "weird" & gt; & Lt; Td> Fridge magnets & lt; / Td> & Lt; / Tr & gt; & Lt; TR & gt; & Lt; TD & gt; Of the dam & lt; / TD & gt; & Lt; / TR & gt; & Lt; / Tbody & gt; & Lt; / Table & gt;

Boiled-down example CSS looks like this: 

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

presents table rows with 'odd' in the expected blue color like Chrome, FF and IE 9 + Classic, because setting the rule in blue will be later in the document And it has the same specificity. But IE7 and IE8 present them in red! So IE is not implementing the second rule?

Because IE7 (released 2006) and IE8 (released 2009) do not understand nth -child (Added in CSS 2010) They start treating another selector as an error in the second rule. The answer is to ignore the whole rule including the other rules which it considers to be valid. Despite connecting with a different selector, the NTH child is being added, it is a strange decision of the developer to ignore the whole rule, instead it is considered invalid rather than the selector only.

The rewriting of CSS will separate the selectors after IE 7 / IE 8 as was previously present and thus resolves the problem: 

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

Note: Please do not be smart-donkey and suggest removing the rule first. Obviously, this is a surplus in the example of such fluctuations, but it is a very small version of a large project in which it was necessary to override previous rules by adding CSS at the end of the document.


Comments

Post a Comment