IE6/7 CSS Specificity Bug

 

After our team launched the new College of Education site, I discovered that IE8’s handy “Browser Mode: IE7” mode of IE8 is useless for real IE7 testing (but IETester actually works!). Undoubtedly this “IE7 mode” has many quirks in its emulation we’ll never know about, but after a few hours of hair-pulling I finally pinned down a real IE6/7 bug that the emulator doesn’t have.

IE versions before 8 apparently vary in their calculation of CSS specificity depending on the order of elements in the selectors. What this means for poor suckers who worry about IE6/7 is that rules that appear later and (should) match specificity won’t always override values. E.g.

<div id="foo"><div id="bar">I should be green.</div></div>
/* both rules have the same specificity */
#foo div  { background:red   /* IE6/7 apply this value */ }
div  #bar { background:green /* correct value to apply */ }

This bug will hit you when you’re pursuing a good goal: trying to keep selectors short. So in these situations make sure to test in IETester at the very least and leave a comment to let future CSS editors know why a selector is longer than needs to be.

6 thoughts on “IE6/7 CSS Specificity Bug”

  3. says:

    IE8′s handy “Browser Mode: IE7″ mode of IE8 is useless for real IE7 testing (but IETester actually works!). Undoubtedly this “IE7 mode” has many quirks in its emulation

    I agree. I mentioned this particular issue in IE blog in 2008 (so far, I have not found exactly where but am still searching and am 100% convinced I have reported this issue): the last (in order of appareance) rule with same media, same importance, same origin, same specificity bug in IE7 was not reproducible with IE8 in IE7 mode but only with the real IE7.

    I also examined the testcases in and there is no testcase testing the “sort by order specified: if two declarations have the same weight, origin and specificity, the latter specified wins” code situation. So, this testcase should be submitted.

    When I created my IE7 bugs collection, I remember that Tino Zijdel was the first to mention this bug:
    and (his tests trigger backward-compatible “quirks” rendering mode though).

    I can submit a testcase and add your name and Tino Zijdel (will try to reach him) in the credits list. You may want to read:

    and then view

    regards, Gérard Talbot

  4. says:

    Steve Clay,

    I have created

    CSS Test: Casdading order – sort by order specified

    It is listed here:

    If you want your name added in the credits link, then please read the 2 pages mentioned in my previous post.

    Because of the compatibility-view bug for such testcase (but also another, which I reported also before: try #bug117:
    : the IE7 compat-emulator view has a bug for such page), the testcase should be included in the CSS 2.1 test suite.

    One other important question is if IE9 (when triggering IE7 standards mode) still has such bug.

    regards, Gérard

  5. says:

    I also examined the testcases in latest RC6 of CSS 2.1 test suite, section 6.4.1 and there is no testcase testing the “sort by order specified: if two declarations have the same weight, origin and specificity, the latter specified wins” code situation. So, this testcase should be submitted.

    A testcase has been submitted to the CSS 2.1 test suite and has been approved:

    has this testcase :

    regards, Gérard Talbot

  6. Pingback:

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.