CSS Differences in Internet Explorer 6, 7 and 8

One of the most bizarre statistical facts in relation to browser use has to be the virtual widespread numbers that currently exist in the use of Internet Explorer versions 6, 7 and 8. As of this writing, Internet Explorer holds about a 65% market share combined across all their currently used browsers. In the web development community, this number is much lower, showing about a 40% share.

The interesting part of those statistics is that the numbers across IE6, IE7, and IE8 are very close, preventing a single Microsoft browser from dominating browser stats — contrary to what has been the trend in the past. Due to these unfortunate statistics, it is imperative that developers do thorough testing in all currently-used Internet Explorer browsers when working on websites for clients, and on personal projects that target a broader audience.
Thanks to the many available JavaScript libraries, JavaScript testing across different browsers has become as close to perfect as the current situation will allow. But this is not true in CSS development, particularly in relation to the three currently used versions of Internet Explorer.
This article will attempt to provide an exhaustive, easy-to-use reference for developers desiring to know the differences in CSS support for IE6, IE7 and IE8. This reference contains brief descriptions and compatibility for:

• Any item that is supported by one of the three browser versions, but not the other two
• Any item that is supported by two of the three browser versions, but not the other one

This article does not discuss:

• Any item that is not supported by any of the three browser versions
• Proprietary or vendor-specific CSS

Therefore, the focus is on differences in the three, not necessarily lack of support. The list is divided into five sections:

• Selectors & Inheritance
• Pseudo-Classes and Pseudo-Elements
• Property Support
• Other Miscellaneous Techniques
• Significant Bugs and Incompatibilities

IE6
No

IE7
No

IE8
Yes

Clipping Regions

Example

1

#box {

2	clip: rect(20px, 300px, 200px, 100px)

3

}

Description

This property specifies an area of a box that is visible, making the rest “clipped”, or invisible.

Support

IE6
No

IE7
No

IE8
Yes

Bugs

Interestingly, this property works in IE6 and IE7 if the deprecated comma-less syntax is used (i.e. whitespace between the clipping values instead of commas)

Orphaned and Widowed Text in Printed Pages

Example

1

p {

2	orphans: 4;

3

}

4

5

p {

6	widows: 4;

7

}

Description

The orphans property specifies the minimum number of lines to display at the bottom of a printed page. The widows property specifies the minimum number of lines to display at the top of a printed page.

Support

IE6
No

IE7
No

IE8
Yes

Page Breaks Inside Boxes

Example

1

#box {

2	page-break-inside: avoid;

3

}

Description

This property specifies whether a page break should occur inside of a specified element or not.

Support

IE6
No

IE7
No

IE8
Yes

Outline Properties

Example

1

#box {

2	outline: solid 1px red;

3

}

Description

outline is the shorthand property that encompasses outline-style, outline-width, and outline-color. This property is preferable to the border property since it does not affect document flow, thus better aiding debugging of layout issues.

Support

IE6
No

IE7
No

IE8
Yes

Alternative Values for the Display Property

Example

1

#box {

2	display: inline-block;

3

}

Description

The display property is usually set to block, inline, or none. Alternative 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

IE6
No

IE7
No

IE8
Yes

Handling of Collapsible Whitespace

Example

1

p {

2	white-space: pre-line;

3

}

4

5

div {

6	white-space: pre-wrap;

7

}

Description

The pre-line value for the white-space property specifies that multiple whitespace elements collapse into a single space, while allowing explicitly set line breaks. The pre-wrap value for the white-space property specifies that multiple whitespace elements do not collapse into a single space, while allowing explicitly set line breaks.

Support

IE6
No

IE7
No

IE8
Yes

Other Miscellaneous Techniques

Media Types for @import

Example

1	@import url("styles.css") screen;

Description

A media type for an imported style sheet is declared after the location of the style sheet, as in the example above. In this example, the media type is "screen".

Support

IE6
No

IE7
No

IE8
Yes

Bugs

Although IE6 and IE7 support @import, they fail when a media type is specified, causing the entire @import rule to be ignored.

Incrementing of Counter Values

Example

1

h2 {

2	counter-increment: headers;

3

}

4

5	h2:before {

6	content: counter(headers) ". ";

7

}

Description

This CSS technique allows auto-incrementing numbers to appear before specified elements, and is used in conjunction with the before pseudo-element.

Support

IE6
No

IE7
No

IE8
Yes

Quote Characters for Generated Content

Example

01

q {

02	quotes: "'" "'";

03

}

04

05	q:before {

06	content: open-quote;

07

}

08

09

q:after {

10	content: close-quote;

11

}

Description

Specifies the quote characters to use for generated content applied to the q (quotation) tag.

Support

IE6
No

IE7
No

IE8
Yes

Significant Bugs and Incompatibilities

Following is a brief description of various bugs that occur in IE6 and IE7 that are not described or alluded to above. This list does not include items that lack support in all three browsers.

IE6 Bugs

• Doesn't support styling of the element
• Doesn't support classes and IDs that begin with a hyphen or underscore
• elements always appear at the top of the stack, unaffected by z-index values:hover pseudo-class values are ignored if anchor pseudo-classes are not in the correct order (:link, :visited, :hover)An !important declaration on a property is overridden by a 2nd declaration of the same property in the same rule set that doesn't use !importantheight behaves like min-heightwidth behaves like min-widthLeft and right margins are doubled on floated elements that touch their parents' side edgesDotted borders appear identical to dashed bordersline-through value for text-decoration property appears higher on the text than on other browsersList items for an ordered list that have a layout will not increment their numbers, leaving all list items preceded by the number "1"List items don't support all possible values for list-style-typeList items with a specified list-style-image will not display the image if they are floatedOffers only partial support for @font-face Some selectors will wrongly match comments and the doctype declarationIf an ID selector combined with a class selector is unmatched, the same ID selector combined with different class selectors will also be treated as unmatched IE7 Bugs List items for an ordered list that have a layout will not increment their numbers, leaving all list items preceded by the number "1"List items don't support all possible values for list-style-typeList items with a specified list-style-image will not display the image if they are floatedOffers only partial support for @font-faceSome selectors will wrongly match comments and the doctype declaration Some IE bugs not mentioned here occur only under particular circumstances, and are not specific to one particular CSS property or value. See the references below for some of those additional issues. Further Resources Details of Changes in Internet Explorer 8CSS Compatibility for Internet Explorer (MSDN)CSS Improvements in Internet Explorer 8 (MSDN)Internet Explorer Exposed - CSS Bugs @ Position Is EverythingSitePoint CSS ReferenceCSS Contents and Browser Compatibility10 Useful CSS Properties Not Supported By Internet Explorer