IE8 and case sensitive selectors
Experienced a really odd bug in some legacy code today and can’t really see anything on Google, so here goes…
As part of a bug fix, we had to switch the doctype of a page, to trigger standards mode in Internet Explorer 8. When we did that though, IE8 promptly ignored a whole section of our stylesheet.
It was picking up on styles before the problem block, and picking up on those after, but for some reason, point blank refused to acknowledge a block of CSS that had previously been working.
Anyway, after a little debugging, the eureka moment came when comparing CSS with the class attribute in question.
They were the same apart from one was lowercase, the other camel case.
Now, although thats not best practice, when referring to the W3C spec for CSS selectors, as we were using HTML this shouldn’t matter.
Selectors are case sensitive in XML, but not in HTML. And, Firefox, Safari, even IE6 and 7, were assigning the styles as expected.
IE8 however was defaulting to XML behaviour, and so causing our issue.
Any way, I wrote a quick test case to show whats going on, ran it through the W3C validator, and got a green stamp for HTML4 Transitional.
Firefox 10 and Safari - as it should be…
Internet Explorer 6 and 7 - not as bad as it could be, surprisingly…
Internet Explorer 8 - wat?
Doesn’t cause any major issues, its easy enough to make sure selector and attribute match, but still unusual behaviour in standards mode and perhaps due to IE8 being forced into standards mode by the X-UA-Compatible meta tag, rather than standards mode been triggered naturally.
