Differences between IE6, IE7 and IE8. Part one

(From the translation. This article does not claim to be complete and consistent, so we will not build any theories based on it. This is just a practical guide for developers, a little corrected and supplemented by me under the realities of Runet.)

One of the strangest statistical facts associated with the use of browsers is the prevalence of Internet Explorer versions 6, 7, and 8. To date, all versions of Internet Explorer together occupy about 65% of the market for currently used browsers. This figure is lower among web developers; here the share of IE users makes up only 40% of the market.
(From transl. I hope these 40% are only unfortunate web designers who check their websites for cross-browser compatibility. Runet statistics are available, for example, here . Notice that in September all browsers of the IE-family had a graph for no apparent reason - they returned for their computers office users, the most devoted admirers of our heroes.)

Interestingly, the popularity of IE browsers is about the same, it is impossible to single out one domain browser, as it was before. (From perev. Of course, it is impossible. I ’m looking and I’m not able to single out the dominant browser. =)) Thus, web developers are now obliged to test the performance of their project in various browsers, developing both websites for their customers and personal pages.
')
Of course, thanks to various Javascript libraries, cross-browser testing has now become as good as this situation allows. (From transl. And there is still the possibility to take screenshots in different browsers, IE Collection and similar tricks) But there is something wrong in this, especially if you look at the result of the three IE versions used.

This article is an attempt to provide comprehensive, easy-to-understand information for web developers trying to understand the differences in CSS processing between IE6, IE7, and IE8. Here are brief descriptions for properties supported by one or two browsers, but not all three at once. It does not consider properties that are not executed by any of IE, as well as specific only to them. Thus, the emphasis is precisely on the differences between browsers, and not on the lack of support for these or other CSS properties.

Selectors and inheritance

Child selectors

Example:
body>p {
color: #fff;
}

Description:
The child selector selects all items that are directly children of the specified parent. In the example above, body is the parent and p is the child. (From transl. For IE7 +, you must also specify the correct Doctype for proper operation.)
Support: IE7, IE8
Errors: In IE7, the child selector will not work if there is an HTML comment between it and the parent element.

Connected classes

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

Description:
Coherent classes are used when one element has several classes, for example:
<dіv class="class1 class2 class3">
<>- .</>
</dіv>

Support: IE7, IE8
Errors: IE6 does not support this property, because it applies this CSS property for the elements of the last class (From the class3 example class) , and not only for those marked by all classes at once.

Attribute selectors

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

Description:
This property allows an element to be checked only if it has the specified attribute. For example, in the example above, all links with the href attribute will be marked, whereas for all others this property will not be applied.
Support: IE7, IE8

Adjacent adjacent selectors

Example:
h1+p {
color: #f00;
}

Description:
This selector defines the properties of the elements adjacent and following immediately by a certain selector. For example, in the code below
<1></1>
<>- .</>
<>- .</>

CSS properties will be applied only to the first paragraph.
Support: IE7, IE8
Errors: In IE7, the child selector will not work if there is an HTML comment between it and the parent element.

Common Neighbor Selectors

Example:
h1~p {
color: #f00;
}

Description:
Defines properties for all adjacent elements following the selected selector. For example, if you use the above example, then this property will apply to the first and second paragraphs. Note that if the paragraph went before the heading, then this property would not apply to it.
Support: IE7, IE8

Pseudo-classes and pseudo-elements

Child selectors after pseudo-class: hover

Example:
a:hover span {
color: #0f0;
}

Description:
An element can be marked as a child like any other selector. In the example above, the span element inside the link will change the text color to green.
Support: IE7, IE8

Connected pseudo-classes: hover

Example:
a:first-child:hover {
color: #0f0;
}

Description:
A pseudo-class can be associated with a neighboring element. In the example above, each link is marked, which is the first child of its parent and applies: hover class to it.
Support: IE7, IE8

Connected pseudo-classes: hover

Example:
a:first-child:hover {
color: #0f0;
}

Description:
A pseudo-class can be associated with a neighboring element. In the example above, each link is marked, which is the first child of its parent and applies: hover class to it. (From the transl. I do not understand, please correct, if wrong.)
Support: IE7, IE8

Pseudo-class: hover for other selectors

Example:
div:hover {
color: #f00;
}

Description:
The pseudo-class: hover can be used for any selectors, not just a.
Support: IE7, IE8

Pseudo-class: first-child

Example:
div li:first-child {
background: blue;
}

Description:
Defines properties for the primary child selectors of the selected class.
Support: IE7, IE8
Errors: In IE7, the selector will not work if there is an HTML comment between the parent and child elements.

Pseudo-class: focus

Example:
a:focus {
border: solid 1px red;
}

Description:
Defines properties for items in focus.
Support: IE8

Pseudo-classes: before and: after

Example:
#box:before {
content: " .";
}

#box:after {
content: " .";
}

Description:
Generates text before and after this block.
Support: IE8

(From translation desktops? I will be glad to advice and tips.)