One of the most bizarre statistics about browsers is that Internet Explorer versions 6, 7 and 8 coexist. As of this article, Internet Explorer versions account for approximately 65% of the market share in total. In the website development community, this number is much smaller, and statistics show that it is only about 40%.
The more interesting part of these statistics is that the values between IE6, IE7, and IE8 are very close, which prevents a single Microsoft browser from dominating the opposite of the past. According to these regrettable statistics, it is necessary for developers to conduct comprehensive testing of all currently used IE browsers when developing websites for customers, and this will also attract more users on personal projects.
Thanks to those 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 the three versions currently in IE.
This article attempts to provide a detailed and easy-to-use reference for different developers who want to understand the support of CSS for IE6, IE7, and IE8. This reference contains an overview and compatibility of the following situations:
A. One of the three browsers supports entries but the other two do not.
B. Two of the three browsers support the entry but the other does not support it.
This article will not discuss:
A. Entries that are not supported by the three browsers
B. Private attributes
Therefore, the focus of this article is on the difference among the three browsers, rather than the necessary support flaws. The list is divided into the following five parts:
1. Selector and inheritance
2. Pseudo-classes and pseudo-elements
3. Attribute support
4. Other technologies
5. Important bugs and incompatibility issues
1. Selector and inheritance
A. Sub-selector
Example
| body > p { color: #ffff; } |
describe
The child selector selects all direct child elements of a specific parent element. In the example above, body is the parent element and p is the child element.
Support
| IE6 No IE7 Yes IE8 Yes |
Bugs
In IE7, if there is an HTML comment between the parent tag and the child tag, the child selector will not work.
B. Chain
Example
| .class1.class2.class3 { background: #ffff; } |
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
| 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 that uses the class, however, it does not limit an element that uses all classes in the chain.
C. Attribute selector
Example
| a[href] { color: #0f0; } |
describe
This selector allows an element to be positioned as long as it has specified properties. In the above example, all a tags with the href attribute will be limited, while a tags without the href attribute will not be limited.
Support
| IE6 No IE7 Yes IE8 Yes |
D. Approaching brother selector
Example
| h1+p { color: #f00; } |
describe
This selector locates the sibling tags that are close to the specified element. The above example will limit the p tag, but it must be the brother of the h1 tag and must follow directly behind 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 work for the first p. Because it is h1's brother and follows h1 immediately. The second p is also a brother of h1, but it does not follow h1 immediately.
Support
| IE6 No IE7 Yes IE8 Yes |
Bugs
In IE7, if there is an HTML comment between the siblings, the adjacent sibling selector will be invalid.
E. Ordinary brother 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 work for both p tags. Of course, if a p element appears before h1, that p element will not be matched.
Support
| IE6 No IE7 Yes IE8 Yes |