The interesting part of these statistics is that the numbers for IE6, IE7, and IE8 are very close, which prevents a single Microsoft browser from dominating the scene—the opposite of what has been the case in the past. Based on these regrettable statistics, it is necessary for developers to thoroughly test all currently used IE browsers when developing websites for clients, and this can also attract more users for personal projects.
Thanks to JavaScript libraries (frameworks), cross-browser JavaScript testing is as close to perfect as the current situation allows. But this is not the case in CSS development, especially when it comes to the three versions of IE that currently exist.
This article attempts to provide a detailed and easy-to-use reference for different developers who want to understand CSS support for IE6, IE7, and IE8. This reference contains an overview and compatibility for the following situations:
A. Items that one of the three browsers supports but the other two do not
B. Items that two of the three browsers support but one does not
This article does not discuss:
A. Items that are not supported by the three browsers
B. Private attributes
Therefore, this article focuses on the differences among the three browsers, rather than the necessary support shortcomings. The list is divided into the following five sections:
1. Selectors and inheritance
2. Pseudo classes and pseudo elements
3. Attribute support
4. Various other technologies
5. Important bugs and incompatibility issues
1. Selectors and inheritance
A. Sub-selector
Example
| body > p { color: #fff; } |
describe
The child selector selects all direct child elements of a specific parent element. In the above example, body is the parent element and p is the child element.
Support status
| IE6 No IE7 Yes IE8 Yes |
Bugs
In IE7, child selectors will not work if there is an HTML comment between the parent tag and the child tag.
B. Chain type
Example
| .class1.class2.class3 { background: #fff; } |
describe
The chain class is used to send an HTML element with multiple class declarations, like this:
| <div class="class1 class2 class3"> <p>Content here.</p> </div> |
Support status
| IE6 No IE7 Yes IE8 Yes |
Bugs
IE6 seems to support this situation, because it can match the last class in the chain to the element using that class, however, it cannot restrict an element using all classes in the chain.
C. Attribute selector
Example
| a[href] { color: #0f0; } |
describe
This selector allows an element to be located as long as it has the specified attributes. In the above example, all a tags with href attributes will be qualified, while a tags without href attributes will not be qualified.
Support status
| IE6 No IE7 Yes IE8 Yes |
D. Nearby sibling selector
Example
| h1+p { color: #f00; } |
describe
This selector locates sibling tags adjacent to the specified element. The above example will qualify the p tag, but it must be a sibling of the h1 tag and must directly follow the h1 tag. for example:
| <h1>heading</h1> <p>Content here.</p> <p>Content here.</p> |
In the above code, the CSS style will only be effective for the first p. Because it is the brother of h1 and follows h1. The second p is also a brother of h1, but it does not follow h1 immediately.
Support status
| IE6 No IE7 Yes IE8 Yes |
Bugs
In IE7, adjacent sibling selectors will have no effect if there is an HTML comment between siblings.
E. Ordinary sibling selector
Example
| h1~p { color: #f00; } |
describe
This selector locates all sibling elements following a specified element. Applying this selector to the example above will apply to both p tags. Of course, if there is a p element that appears before h1, that p element will not be matched.
Support status
| IE6 No IE7 Yes IE8 Yes |