Analysis: differences between CSS in IE6, IE7, and IE8

One of the most bizarre statistics about browsers isInternet ExplorerVersions 6, 7, and 8 coexist. As of this article, each version of Internet Explorer has a total market share of about 65%. In the website development community, this number is much smaller, and statistics show that it is only about 40%.

The interesting part of these statistics is that the numbers between IE6, IE7, and IE8 are very close, which prevents a single Microsoft browser from occupying the dominant position-opposite to the previous situation. Based on these unfortunate statisticsIt is necessary for developers to fully test all the IE browsers currently in use.In this way, you can win more users in personal projects.

Thanks to the JavaScript libraries (frameworks), cross-browser Javascript testing is almost as perfect as the current situation permits. This is not the case in CSS development, especially in relation to the three existing versions of IE.

This article tries to provide a copy for developers who want to learn about CSS's support for IE6, IE7, and IE8.Detailed and easy-to-use reference. This reference provides an overview and compatibility of the following situations:

• Among the three browsersOneSupported.TwoUnsupported entries
• Among the three browsersTwoSupported.OneUnsupported entries

This article does not discuss:

• Entries not supported by the three browsers
• Private attributes

Therefore, the center of this article is the difference among the three browsers, rather than the necessary support defects. The list is divided into the following five parts:

• Selector and inheritance
• Pseudo classes and pseudo elements
• Attribute support
• Other technologies
• Important bugs and incompatibility issues

Examples of selector and inherited subselector

body > p {color: #fff;}

Description

The child selector Selects all direct child-level elements of a specific parent-level element. In the preceding example,bodyIs the parent element,pIs a child element.

Support IE6
No IE7
Yes IE8
YesBugs

In IE7, if there is an HTML comment between the parent tag and the Child tag, the Child selector will not work.

Chain example

.class1.class2.class3 {background: #fff;}

Description

The chain class is used to send an HTML element with multiple class declarations, just like this:

<div class="class1 class2 class3"><p>Content here.</p></div>

Support IE6
No IE7
Yes IE8
YesBugs

IE6 seems to support this situation because it can match the last class in the chain to the element using this class. However, it does not limit the elements of all the classes in the chain.

Property selector example

a[href] {color: #0f0;}

Description

This selector allows an element to be located as long as it has a specified attribute. In the preceding example, all a tags with the href attribute are limited, but a tags without the href attribute are not limited.

Support IE6
No IE7
Yes IE8
Yes near sibling selector example

h1+p {color: #f00;}

Description

This selector locates the sibling tag near the specified element. The above example limits the p tag, but it must be the brother of the h1 tag and be followed by the h1 tag directly. For example:

In the above Code, the CSS style will only be valid 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 is not followed by h1.
Support
IE6

No
IE7

Yes
IE8

YesBugs
In IE7, if there is an HTML comment between siblings, the near sibling selector will be invalid.
Common sibling selector example
h1~p {color: #f00;}
Description
This selector locates all sibling elements after a specified element. Applying this selector to the example above will be valid for both p labels. Of course, if a p element exists before h1, the p element will not be matched.
Support
IE6

No
IE7

Yes
IE8

Yes pseudo class and pseudo element: descendant selector example after hover
a:hover span {color: #0f0;}
Description
An element can be located by the selector behind the hover pseudo class, just like the descendant selector. In the preceding example, the text color in the span element in element a is changed when you hover the mouse over it.
Support
IE6

No
IE7

Yes
IE8

Yes-link pseudo-Class Example
a:first-child:hover {color: #0f0;}
Description
Pseudo classes can be linked to narrow down the selection of elements. In the above example, the first a tag under each parent element is located and the hover pseudo class P is applied to it.
Support
IE6

No
IE7

Yes
IE8

Hover example in Yes non-anchor Element
div:hover {color: #f00;}
Description
:hoverThe pseudo class can be applied to the hover state of any element, not just the tag.
Support
IE6

No
IE7

Yes
IE8

Yes: first-child pseudo-Class Example
div li:first-child {background: blue;}
Description
The pseudo class is used to locate the first child element of the parent element of each specified element.
Support
IE6

No
IE7

Yes
IE8

YesBugs
In IE7, if the first child element to be located has an HTML comment before it, the first-child pseudo class will be invalid.
: Focus pseudo-Class Example
a:focus {border: 1px solid red;}
Description
This pseudo class locates all elements with keyboard focus.
Support
IE6

No
IE7

No
IE8

Yes: before AND: after pseudo-class examples
# Box: before {content: "This text is in front of the box"; }# box: after {content: "This text is behind the box ";}
Description
The two pseudo elements add the generated content before and after the specified Element respectively, and are used together with the content attribute.

 
 
 
  
Three pages in total:
 
  
Previous Page
 
  
1
 
  
2
 
  
3
 
  
Next Page