The following table explains the failures of IE7. I am only listing bugs in IE7 CSS from the selector perspective, not from the rendering perspective. The fact that IE7 fails to heed certain valid CSS selectors will provide opportunity for discovering IE hacks and filters. Quirks in rendering CSS will be posted in a future entry.
|Selector||IE7||Explanation of issues|
|E > F||√|
|E + F||√|
|E[attribute]||Δ||Understands attributes with name value/pairing, but does not understand attributes that are incorrect XHTML. For example, IE7 understands this selector for attributes such as
|E[attribute~=value]||Δ||The quirkiness of IE7 in this case is that it employs some case-sensitivity to the value whether or not the attribute type requires case sensitivity. While it makes sense to compare id values in a case senstive manner, attribute values for HTML are case insensitive. The XHTML specifications state that element and attribute names must be lower case, but it does not say anything about attribute values. In this case,
|E[attribute|=value]||Δ||IE7 has the same quirkiness as above. In this case,
Works in most cases except when the first child is a comment. IE7 treats the comment as the first child, even though CSS specifications state that
|:lang()||Χ||IE7 fails completely with this selector, which makes this selector perfect for filtering against IE7.
|::before||Χ||If IE7 can’t handle the
|::after||Χ||Likewise, if IE7 doesn’t understand :before, ::before and :after, it won’t understad the double colon pseudo-element after either|
Whereas IE7 recognizes
IE7 seems to have no support for double-colon notation.
As in the case of
|Substring matching attribute selectors|
|E[attribute^=value]||Χ||IE7 doesn’t understand the concept of "substring" matching. The CSS specifications state that the E element whose attribute value begins exactly with the string listed in the value should be matched. IE7 only understands exact matches for the entire value. IE7 respects the attribute values that should be case sensitive.|
|E[attribute$=value]||Χ||The CSS specifications state that the E element whose attribute value ends exactly with the string listed in the value should be matched. IE7 only understands exact matches for the entire value. See the attribute above.|
|E[attribute*=value]||Χ||Represents an element with the att attribute whose value contains at least one instance of the substring "val".|
|E ~ F||√|
|:root||Χ||This should match HTML, since HTML is the root. It doesn’t. Simply use
|:nth-child()||Χ||These 7 selectors are all currently ignored by IE7 and all other grade-A browsers. Since there is no support for them, I can not compare IE7’s handling versus other browsers, and these selectors are useless for “targeting” other browser.|
|:empty||Χ||Ignored, but partially supported by FF and Netscape, so may be useful for targeting those browsers.|
- These tests were run in XHTML 1.0 Strict
- I will elaborate here on the last 7 selectors when i have a bit more time
- IE7 quirks in rendering CSS (versus understanding CSS) will be posted in a separate entry.
- This article goes over IE7 failings. Please see CSS3 Selectors and Browser Support for other browser’s support of CSS3 selectors.