On the difference of CSS in IE6, 7 and 8

The difference between CSS in Internet Explorer 6, 7 and 8 is believed to help you.

One of the most bizarre statistics about browsers is that Internet Explorer version 6,7 and 8 coexist. As of this article, Internet Explorer releases a total of about 65% of the market share. In the website development community, this number is much smaller, the statistics show about only 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 dominating--contrary to what it used to be. Based on these unfortunate statistical results, it is necessary for developers to test all the current IE browsers in a comprehensive way when developing a Web site for their clients, and can also attract more users on personal projects.

Thanks to those JavaScript libraries (frames), the test of Cross-browser JavaScript has been as close to perfection as the current situation allows. But in CSS development is not the case, especially related to IE currently exists in three versions.

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

• one support in three browsers and two other unsupported entries
• two support in three browsers and another unsupported entry

This article does not discuss:

• Three entries that are not supported by browsers
• Private property

Therefore, the center of this article is different in three browsers, rather than the necessary support flaw. The list is divided into the following five sections:

• Selectors and inheritance
• Pseudo class and Pseudo element
• Property Support
• Various other technologies
• Important bugs and incompatibility issues

Selectors and inheritance

Child Selector

Example

body> p {
color:
#fff;
}
description
The child selector selects all immediate 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
Bugs
In IE7, if there is an HTML comment between the parent and child tags, the child selector will not work.

Chain class
Example
.class1.class2.class3
{
background:
#fff;
}
description
A 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 situation
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 limit the use of all the elements of 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 the specified attributes. In the above example, all a tags with the href attribute will be qualified, while a tags without the href attribute will not be qualified.

Support situation
IE6
No IE7
Yes IE8
Yes
Near Brother Selector
Example
h1 + p {
color:
# f00;
}
description
This selector locates sibling tags that are close to the specified element. The above example will limit the p tag, but he must be a sibling of the h1 tag and must immediately follow the h1 tag. such as:

<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 a brother of h1 and follows h1 immediately. The second p is also a brother of h1, but it does not follow h1 immediately.

Support situation
IE6
No IE7
Yes IE8
Yes
Bugs
In IE7, if there is an HTML comment between siblings, the adjacent sibling selector will not work.

Ordinary 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 work for both p-tags. Of course, if there is a p element before h1, 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: hover span {
color:
# 0f0;
}
description
An element can be positioned by a selector behind the: hover pseudo-class, just like descendant selectors. The above example will change the color of the text in the span element inside the a element when the mouse is hovered.

Support situation
IE6
No IE7
Yes IE8
Yes
Chain pseudoclass
Example
a: first-child: hover {
color:
# 0f0;
}
description
Pseudo-classes can be chained to narrow element selection. The above example will locate the first a tag under each parent element and apply the hover pseudo-class P to it.

Support situation
IE6
No IE7
Yes IE8
Yes
In non-anchor elements: hover
Example
div: hover {
color:
# f00;
}
description
The: hover pseudo-class can be applied to the hover state of any element, not just the a tag.

Support situation
IE6
No IE7
Yes IE8
Yes
: first-child pseudo-class
Example
div li: first-child {
background:
blue;
}
description
The pseudo-class locates the first child element of the parent element of each specified element.

Support situation
IE6
No IE7
Yes IE8
Yes
Bugs
In IE7, if there is an HTML comment before the first child element to be positioned, 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 that have keyboard focus.

Support situation
IE6
No IE7
No IE8
Yes
: before and: after pseudo-classes
Example
#box: before {
content:
"This text is in front of the box";
}
 
#box: after {
content:
"This text is behind the box";
}
description
These two pseudo-elements add generated content in front of and behind the specified element, respectively, and use them in conjunction with the content attribute.

Support situation
IE6
No IE7
No IE8
Yes
Attribute support
Actual size resulting from position
Example
#box
{
position:
absolute;
top:
0;
right:
100px;
left:
0;
bottom:
200px;
background:
blue;
}
description
Defining top, right, bottom, and left values on an absolutely positioned element will give the element the actual size (width and height), although there are no settings for width and height values.

Support situation
IE6
No IE7
Yes IE8
Yes
Min-Height and Min-Width
Example
#box
{
min-height:
500px;
min-width:
300px;
}
description
These two attributes specify the minimum value of the width and height of the element, respectively, allowing a box to be larger than the specified minimum, but not smaller. They can be used together or separately.

Support situation
IE6
No IE7
Yes IE8
Yes
Max-Height and Max-Width
Example
#box
{
max-height:
500px;
max-width:
300px;
}
description
These two attributes specify the maximum value of the height and width of the element, respectively, allowing a box to be smaller than this specified maximum, but not larger. They can also be used simultaneously or individually.

Support situation
IE6
No IE7
Yes IE8
Yes
Transparent border color
Example
#box
{
border:
solid
1px
transparent;
}
description
A transparent border color allows a border to occupy the same space as the border color is visible (or opaque).

Support situation
IE6
No IE7
Yes IE8
Yes
Fixed position element
Example
#box
{
position:
fixed;
}
description
This value of the position property allows an element to be positioned absolutely relative to the window.

Support situation
IE6
No IE7
Yes IE8
Yes
Background image at a fixed position
Example
#box
{
background-image:
url (images / bg.jpg);
background-position:
0
0;
background-attachment:
fixed;
}
description
The value of the background-attachment property is fixed to allow a background image to be positioned absolutely relative to the window.

Support situation
IE6
No IE7
Yes IE8
Yes
Bugs
Just like position: fixed, IE6 does not support the fixed value of background-positon. However, this value is only valid in IE6 when it is used for the root element.

Attribute value "inherit"
Example
#box
{
display:
inherit;
}
description
Apply the value inherit to an attribute that allows an element to inherit the calculated value from its containing element.

Support situation
IE6
No IE7
No IE8
Yes
Bugs
IE6 and IE7 do not support inherit values other than the direction and visibility properties.

Table cell borders are blank
Example
table td {
border-spacing:
3px;
}
description
This property sets the space between the borders of adjacent table cells.

Support situation
IE6
No IE7
No IE8
Yes
Rendering empty cells in a table
Example
table {
empty-cells:
show;
}
description
This attribute only applies to elements whose display attribute is set to table-cell, allowing empty cells to render their borders and background. Otherwise, they will not be visible.

Support situation
IE6
No IE7
No IE8
Yes
Horizontal position of table header
Example
table {
caption-side:
bottom;
}
description
This attribute allows the title of a table to be placed at the bottom of the table-the default is the header.

Support situation
IE6
No IE7
No IE8
Yes
Trim area
Example
#box
{
clip: rect (20px,
300px,
200px,
100px)
}
description
This property specifies that an area of a box is visible, and the rest is trimmed or not visible.

Support situation
IE6
No IE7
No IE8
Yes
Bugs
Interestingly, IE6 and IE7 can also use this property if you don't use commas to separate the values. (For example, use a space to separate cut values.)

Orphanes and widows in print page
Example
p {
orphans:
4;
}
 
p {
widows:
4;
}
description
The orphans property sets the minimum number of lines displayed at the bottom of the printed page. The widows property is used to set the number of lines of at least the paragraph displayed in the header of the print page.

Support situation
IE6
No IE7
No IE8
Yes
Page splitting inside the box
Example
#box
{
page-break-inside:
avoid;
}
description
This attribute sets whether paging occurs within a specified element.

Support situation
IE6
No IE7
No IE8
Yes
Outline property
Example
#box
{
outline:
solid
1px
red;
}
description
outline is an abbreviation of outline-style, outline-width, and outline-color. This property is better than the border property because it does not affect the document flow, so u is more useful for debugging layout problems.

Support situation
IE6
No IE7
No IE8
Yes
Substitute values for the display property
Example
#box
{
display: inline-block;
}
description
The display property is usually set to block, inline, or none. Substitute values include:

inline-block
inline-table
list-item
run-in
table
table-caption
table-cell
table-column
table-column-group
table-footer-group
table-header-group
table-row
table-row-group
Support situation
IE6
No IE7
No IE8
Yes
Handling collapsible blanks
Example
p {
white-space: pre-line;
}
 
div {
white-space: pre-wrap;
}
description
The pre-line value setting of the white-space property folds multiple blank elements into a single blank, while allowing explicit line breaks. The pre-wrap value of the white-space property does not collapse multiple blanks into one, but also allows for explicit line breaks.

Support situation
IE6
No IE7
No IE8
Yes
Various other technologies
@ import's media types
Example
@import url ("styles.css") screen;
description
As in the example above, the media type of the imported style sheet file is declared after the file address. In this example, the media type is "screen".

Support situation
IE6
No IE7
No IE8
Yes
Bugs
Although IE6 and IE7 support @import, they will be invalid when the media type is specified, and even cause the positive @import rule to be invalid.

Count up
Example
h2
{
counter-increment: headers;
}
h2: before {
content: counter (headers)
".";
}
description
This CSS technology allows you to automatically increase the number that appears in front of a specified element and use it in conjunction with the before pseudo-element.

Support situation
IE6
No IE7
No IE8
Yes
Generate quote characters for content
Example
q {
quotes:
"'"
"'";
}
 
q: before {
content:
open-quote;
}
 
q: after {
content:
close-quote;
}
description
Specifies the reference call sign used to generate the content for the q tag.

Support situation
IE6
No IE7
No IE8
Yes
Important bugs and incompatibilities
Here are the many bugs in IE6 and IE7 that were not mentioned above. Of course this list does not include entries that are not supported in all three browsers.

IE6 Bugs
Styling of <abbr> elements is not supported
Class and ID names that start with a hyphen and underscore are not supported
The <select> element always appears on top of the stack, regardless of the z-index value
The: hover pseudo-class will not work if the anchor pseudo-classes are not in the correct order
The! Important declaration of an attribute will be overwritten by the second declaration of the same attribute in the same rule without using! Important.
height behaves like min-height
width behaves like min-width
Double margin
The dotted border looks like a dashed border
The line-through value of text-decoration looks higher in text than in other browsers
If the ordered list has a fixed structure (haslayout is true, the height / width / zoom cannot be set to activate haslayout values), the sequence number will not increase, but will remain 1
List elements do not support all available values of list-style-type
If the list entry is floating, the specified list-style-image will not be displayed
@ Font-face is not fully supported
Some selectors incorrectly match comments and document declarations
If an ID selector combined with a class selector does not match, the same ID selector combined with a different class selector will also be treated as a mismatch.
IE7 Bugs
If the ordered list has a fixed structure (haslayout is true, the height / width / zoom cannot be set to activate haslayout values), the sequence number will not increase, but will remain 1
List elements do not support all available values of list-style-type
If the list entry is floating, the specified list-style-image will not be displayed
@ Font-face is not fully supported
Some selectors incorrectly match comments and document declarations