Shulou(Shulou.com)06/02 Report--

How to analyze CSS in IE6, IE7, IE8 compatibility differences, many novices are not very clear about this, in order to help you solve this problem, the following editor will explain in detail for you, people with this need can come to learn, I hope you can get something.

To describe the compatibility differences of CSS in IE6, IE7, and IE8, as of this article, each version of InternetExplorer has a total market share of about 65%. In the website development community, the figure is much smaller, with statistics showing that it is only about 40%. The interesting part of these statistics is that the values between IE6, IE7, and IE8 are very close, which prevents a single Microsoft browser from being dominant-- contrary to the past.

Analysis of compatibility differences of CSS in IE6, IE7 and IE8

One of the most bizarre statistics about browsers is that InternetExplorer versions 6, 7 and 8 coexist. As of this article, each version of InternetExplorer has a total market share of about 65%. In the website development community, the figure is much smaller, with statistics showing that it is only about 40%.

The interesting part of these statistics is that the values between IE6, IE7, and IE8 are very close, which prevents a single Microsoft browser from being dominant-- contrary to the past. Based on these regrettable statistics, it is necessary for developers to fully test all currently used IE browsers when developing websites for customers, and this can attract more users on personal projects.

Thanks to those JavaScript libraries (frameworks), cross-browser Javascript testing is as close 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's support for IE6, IE7, and IE8. This reference contains an overview and compatibility of the following situations:

One of ◆ 's three browsers supports and the other two unsupported entries

Entries supported by two of ◆ 's three browsers and not supported by the other

This article does not discuss:

Entries that are not supported by ◆ 's three browsers

◆ Private Properties

Therefore, the focus of this article is the differences among the three browsers, not the necessary support defects. The list is divided into the following five sections:

◆ selector and inheritance

◆ pseudo-classes and pseudo-elements

◆ attribute support

Various other technologies of ◆

◆ important bug and incompatibility issues

Selector and inheritance

Subselector

Example

Body > p {color: # fff;}

Description

The child selector selects all the direct child elements of a particular parent element. In the above example, body is the parent element and p is the child element.

Support situation

IE6,No

IE7,Yes

IE8,Yes

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

Chain class

Example

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

Description

The chain class is used to send a case where a HTML element has multiple class declarations, like this:

Contenthere.

Support situation

IE6,No

IE7,Yes

IE8,Yes

IE6 seems to support this situation because it can match a class in a chain to an element that uses that class. However, it does not restrict an element that uses all the class in the chain.

Attribute selector

Example

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

Description

This selector allows an element to be positioned as long as it has a specified attribute. In the above example, all a tags with the href attribute are qualified, while the a tags without the href attribute are not qualified.

Support situation

IE6,No

IE7,Yes

IE8,Yes

Neighboring brother selector

Example

H 2roomp {color: # f00;}

Description

The selector locates sibling tags that are close to the specified element. The above example will qualify the p tag, but it must be the brother of the H2 tag and follow the H2 tag directly. For example:

Heading

Contenthere.

Contenthere.

In the above code, the CSS style will only be valid for * p. Because it is the brother of H2 and follows H2 closely. The second p is also a brother of H2, but it does not follow H2.

Support situation

IE6,No

IE7,Yes

IE8,Yes

In IE7, if there is a HTML comment between brothers, the neighboring sibling selector will have no effect.

Ordinary brother selector

Example

H 2roomp {color: # f00;}

Description

The selector locates all sibling elements after a specified element. Applying this selector to the above example will be valid for both p tags. Of course, if a p element appears before H2, that p element will not be matched.

Support situation

IE6,No

IE7,Yes

IE8,Yes

Pseudo classes and pseudo elements

Descendant selector after hover

Example

A:hoverspan {color: # 0f0;}

Description

An element can be located by the selector after the hover pseudo class, just like the descendant selector. The above example will change the color of the text in the span element within element a when the mouse is hovering.

Support situation

IE6,No

IE7,Yes

IE8,Yes

Chain pseudo class

Example

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

Description

Pseudo classes can be chained together to narrow the selection of elements. The above example locates the first a tag under each parent element and applies the hover pseudo-class P to it.

Is it helpful for you to read the above content? If you want to know more about the relevant knowledge or read more related articles, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.