CSS for IE6, IE7, IE8 support detailed and easy-to-use reference

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 while the other two unsupported entries
• two support in three browsers and another unsupported entry

This article does not discuss:

• Three browsers do not support the entry
• Private properties

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

Selector and inherited sub-selectors example

Body > P {color: #fff;}

Describe

The child selector selects all the immediate child elements of a particular parent element, in the example above, the 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 label and the child label, the child selector will not work.

Chain Class Example

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

Describe

A chain class is used to send an HTML element with multiple class declarations, as in this case:

<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 matches the last class in the chain to the element that uses that class, however, it does not restrict a single element that uses all classes in the chain.

Property Selector Example

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

Describe

The selector allows an element to be positioned as long as it has a specified property. In the example above, all a tags with an href attribute are qualified, and a tag without an HREF attribute is not qualified.

Support situation

IE6
No IE7
Yes IE8
Yes

Adjacent Sibling Selector example

h1+p {color: #f00;}

Describe

The selector locates the sibling label that is adjacent to the specified element. The above example will qualify the P tag, but he must be the brother of the H1 tag and be followed directly behind the H1 tag. Like what:

In the above code, the CSS style will be valid only for the first p. Because it is H1 's brother and closely follows the H1. The second p is also a brother of H1, but it does not follow the H1.
Support situation
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.
Common Sibling Selector Example
h1~p {color: #f00;}
Describe
The selector locates all sibling elements that follow a specified element. Applying this selector to the example above will be valid for two P tags. Of course, if a P element appears before H1, that P element will not be matched.
Support situation
IE6
No IE7
Yes IE8
Yes
Pseudo-class and pseudo-elements: descendant selector example after hover
A:hover span {color: #0f0;}
Describe
An element can be positioned as a selector after the hover pseudo-class, just like a descendant selector. The above example will change the color of the text in the span element within the a element when the mouse hovers over it.
Support situation
IE6
No IE7
Yes IE8
Yes
Chain Pseudo-class example
a:first-child:hover {color: #0f0;}
Describe
Pseudo-classes can be chained together to narrow down 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.
Support situation
IE6
No IE7
Yes IE8
Yes
Non-anchor element: hover Example
div:hover {color: #f00;}
Describe
Pseudo-classes can be applied to the hover state of any element, not just a tag.
Support situation
IE6
No IE7
Yes IE8
Yes
: First-child pseudo-class example
Div li:first-child {background:blue;}
Describe
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;}
Describe
The pseudo-class locates all elements that have keyboard focus.
Support situation
IE6
No IE7
No IE8
Yes
: Before and: After Pseudo-class example
#box: Before {content: "This paragraph is in front of the box";} #box: After {content: "This paragraph text is behind the box";}
Describe
These pseudo-elements add the resulting content, in combination with the content property, before and after the specified element, respectively.
Support situation
IE6
No IE7
No IE8
Yes
The Position property supports an example of the actual size produced by the
#box {position:absolute;top:0;right:100px;left:0;bottom:200px;background:blue;}
Describe
The definition,,    , and  value to an absolutely positioned element will give the element the actual size (width and height), although it is not set to make the width and height values.
Support situation
IE6
No IE7
Yes IE8
Yes
Min-height and Min-width examples
#box {min-height:500px;min-width:300px;}
Describe
These two properties specify the minimum value of the width and height of the element, allowing a box to be larger than the specified minimum, but not smaller. Both of them can be used together, or they can be separated.
Support situation
IE6
No IE7
Yes IE8
Yes
Max-height and Max-width examples
#box {max-height:500px;max-width:300px;}
Describe
These two properties specify the maximum height and width of the element, allowing a box to be smaller than the maximum value specified, but not larger. They can also be used at the same time or separately.
Support situation
IE6
No IE7
Yes IE8
Yes
Transparent Border Color Example
#box {border:solid 1px transparent;}
Describe
A transparent border color allows a border and border color to be visible (or opaque) while occupying the same space.
Support situation
IE6
No IE7
Yes IE8
Yes
Fixed position Element Example
#box {position:fixed;}
Describe
This value of the property allows an element to be absolutely positioned relative to the window.
Support situation
IE6
No IE7
Yes IE8
Yes
Example of a background chart for a fixed position
#box {background-image:url (images/bg.jpg); background-position:0 0;background-attachment:fixed;}
Describe
The value of the property is fixed to allow a background picture to be absolutely positioned relative to the window.
Support situation
IE6
No IE7
Yes IE8
Yes
Bugs
Like Position:fixed, IE6 also does not support the fixed value of Background-positon. However, IE6 only works when the value is used for the root element.
Property value "Inherit" example
#box {Display:inherit;}
Describe
Applies a value  to an attribute that allows an element to inherit the computed value from its containing element.
Support situation
IE6
No IE7
No IE8
Yes
Bugs
IE6 and IE7 do not support  values except  and  attributes.
Example of a blank border of a table cell
Table td {BORDER-SPACING:3PX;}
Describe
This property sets the space between the borders of adjacent table cells.
Support situation
IE6
No IE7
No IE8
Yes
Example of rendering empty cells in a table
Table {empty-cells:show;}
Describe
This property, applied only to elements of the display property, is set to Table-cell elements, allowing empty cells to render their borders and backgrounds. Otherwise, they will not be visible.
Support situation
IE6
No IE7
No IE8
Yes
Example of horizontal position for table headings
Table {Caption-side:bottom;}
Describe
This property allows the title of a table to be placed at the bottom of the table-the default is the head.
Support situation
IE6
No IE7
No IE8
Yes
Trim Area Example
#box {clip:rect (20px, 300px, 200px, 100px)}
Describe
This property specifies that one area of a box is visible, the rest is trimmed off, or not visible.
Support situation
IE6
No IE7
No IE8
Yes
Bugs
Interestingly, if you do not use commas separating the values, IE6 and IE7 can also use this property. (for example, use a space to separate the clipped values.) )
Examples of orphanes and widows in printed pages
p {orphans:4;} p {widows:4;}
Describe
property sets the minimum number of rows to display at the bottom of the printed page. The  property is used to set the number of lines of the paragraph that is displayed at least at the head of the print page.
Support situation
IE6
No IE7
No IE8
Yes
Example of page splitting inside a box
#box {page-break-inside:avoid;}
Describe
This property sets whether the paging occurs within a specified element.
Support situation
IE6
No IE7
No IE8
Yes
Outline Property Example
#box {outline:solid 1px red;}
Describe
Yes  ,  , and  the abbreviation. This property is better than the border property because it does not affect the flow of the document, so U is more helpful in debugging layout problems.
Support situation
IE6
No IE7
No IE8
Yes
Example of an alternative value for the display property
#box {display:inline-block;}
Describe
property is typically set to  ,  ,, or  . Alternative values include:
Support situation
IE6
No IE7
No IE8
Yes
Working with collapsible whitespace examples
p {white-space:pre-line;} div {white-space:pre-wrap;}
Describe
The Pre-line value setting for a property collapses multiple blank elements into a single blank, allowing explicit set-up to break. the value of the property  does not collapse multiple whitespace into one, but it also allows for explicit setting of a break.
Support situation
IE6
No IE7
No IE8
Yes
Examples of media types with various other technologies @import
@import url ("styles.css") screen;
Describe
As in the example above, the media type of the introduced style sheet file is declared behind 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  , they will not work when the media type is specified, or even cause the positive @import rule to be invalid.
Count Increment Example
h2 {counter-increment:headers;} H2:before {content:counter (Headers) ".";}
Describe
This CSS technique allows you to automatically increment the number that appears in front of the specified element, combined with the before pseudo-element.
Support situation
IE6
No IE7
No IE8
Yes
Generate reference word for Content Descriptor example
Q {quotes: "'" "'";} Q:before {content:open-quote;} q:after {content:close-quote;}
Describe
Specifies the reference call sign used to generate the content for the Q tag.
Support situation
IE6
No IE7
No IE8
Yes
Important Bug and incompatibility issues
The following are a number of bugs in IE6 and IE7 that are not mentioned above. Of course, this list does not include entries that are not supported in these three browsers.
IE6 Bugs
 
 

  
  
 
   
Setting elements with styles is not supported 
 
   
Class and ID names beginning with hyphens and underscores are not supported
 
   
Elements always appear on top of the stack, ignoring z-index values
 
   
(  ,  ,  )  the Pseudo-class will not be valid
 
   
The declaration of a property  is overridden by the second declaration of the same attribute in the same rule that does not use!important.
 
   
Performance is similar to
 
   
Performance is similar to
 
   
Double left and right margin
 
   
Dot border (dotted) looks like a dashed border (dashed)
 
   
value looks higher in text than other browsers
 
   
If there is a fixed structure (Haslayout is true, you cannot set the value of the active haslayout such as the height/width of the Li/zoom), the sequence number will not increase, but remain at 1
 
   
all available values not supported by the list element
 
   
If the list entry floats, the specified  will not be displayed
 
   
Not fully supported
 
   
Some selectors incorrectly match comments and document declarations
 
   
If an ID selector does not match a class selector, the same ID selector combined with a different class selector will also be treated as a mismatch.
 
  
 
 
IE7 Bugs
 
 

  
  
 
   
If there is a fixed structure (Haslayout is true, you cannot set the value of the active haslayout such as the height/width of the Li/zoom), the sequence number will not increase, but remain at 1
 
   
all available values not supported by the list element
 
   
If the list entry floats, the specified  will not be displayed
 
   
Not fully supported
 
   
Some selectors incorrectly match comments and document declarations
 
  
 
 
Some IE bugs that are not mentioned here will only occur in a particular environment and are not assigned to a specific CSS property or value. Check out the references below to learn more about the issue:
More resources about Authors
Louis Lazaris is a freelance, web developer living in Toronto, Canada, with 9 years of experience in Web development, publishing Web design articles and tutorials in its blog. You can or may be contacting him.
CSS for IE6, IE7, IE8 support detailed and easy-to-use reference