CSS Differences in Internet Explorer 6, 7 and 8
- By Louis Lazaris
- October 14th, 2009
- 268 Comments
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 share1 combined across all their currently used browsers. In the web development community, this number is much lower, showing about a 40% share2.
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 & Inheritance3
- Pseudo-Classes and Pseudo-Elements4
- Property Support5
- Other Miscellaneous Techniques6
- Significant Bugs and Incompatibilities7
Selectors & Inheritance
Child Selectors Link
Example Link
body>p {
color: #fff;
}Description Link
The child selector selects all elements that are immediate children of a specified parent element. In the example above, body is the parent, and p is the child.
Support Link
Bugs Link
In IE7, the child selector will not work if there is an HTML comment between the parent item and the child.
Chained Classes Link
Example Link
.class1.class2.class3 {
background: #fff;
}Description Link
Chained classes are used when the same HTML element has multiple classes declared, like this:
<div class="class1 class2 class3"> <p>Content here.</p> </div>
Support Link
Bugs Link
IE6 appears to support this property, because it matches the last class in the chain to an element having that class, however, it does not restrict the class to an element that has all the classes in the chain, like it should.
Attribute Selectors Link
Example Link
a[href] {
color: #0f0;
}Description Link
This selector allows an element to be targeted only if it has the specified attribute. In the example above, all anchor tags that have href attributes would qualify, but not anchor tags that did not have href attributes.
Support Link
Adjacent Sibling Selectors Link
Example Link
h1+p {
color: #f00;
}Description Link
This selector targets siblings that are adjacent to the specified element. The example above would target all paragraph tags that are siblings of, and come directly after, primary heading tags. For example:
<h1>heading</h1> <p>Content here.</p> <p>Content here.</p>
In the code above, the CSS styles specified would target only the first paragraph, because it is a sibling to the <h1> tag and is adjacent. The second paragraph is a sibling, but is not adjacent.
Support Link
Bugs Link
In IE7, the adjacent sibling selector will not work if there is an HTML comment between the siblings.
General Sibling Selectors Link
Example Link
h1~p {
color: #f00;
}Description Link
This selector targets all siblings that appear after a specified element. Applying this selector to the HTML example given in the previous section will select both paragraph tags, however, if one of the paragraphs appeared before the heading, that paragraph would not be targeted.
Support Link
Pseudo-Classes and Pseudo-Elements
Descendant Selector After :hover Pseudo-Class Link
Example Link
a:hover span {
color: #0f0;
}Description Link
An element can be targeted with a selector after a :hover pseudo class, similar to how any descendant selector works. The above example would change the font color inside all <span> elements inside of anchor elements while the anchor is hovered over.
Support Link
Chained Pseudo-Classes Link
Example Link
a:first-child:hover {
color: #0f0;
}Description Link
Pseudo-classes can be chained to narrow element selection. The above example would target every anchor tag that is the first child of its parent and apply a hover class to it.
Support Link
:hover on Non-Anchor Elements Link
Example Link
div:hover {
color: #f00;
}Description Link
The :hover pseudo-class can apply a hover, or rollover state, to any element, not just anchor tags.
Support Link
:first-child Pseudo-Class Link
Example Link
div li:first-child {
background: blue;
}Description Link
This pseudo-class targets each specified element that is the first child of its parent.
Support Link
Bugs Link
In IE7, the first-child pseudo-class will not work if an HTML comment appears before the targeted first child element.
:focus Pseudo-Class Link
Example Link
a:focus {
border: solid 1px red;
}Description Link
This pseudo-class targets any element that has keyboard focus.
Support Link
:before and :after Pseudo-Elements Link
Example Link
#box:before {
content: "This text is before the box";
}
#box:after {
content: "This text is after the box";
}Description Link
This pseudo-element places generated content before or after the specified element, used in conjunction with the content property.
Support Link
Property Support
Virtual Dimensions Determined by Position Link
Example Link
#box {
position: absolute;
top: 0;
right: 100px;
left: 0;
bottom: 200px;
background: blue;
}Description Link
Specifying top, right, bottom, and left values for an absolutely positioned element will give the element “virtual” dimensions (width and height), even if width and height are not specified.
Support Link
Min-Height & Min-Width Link
Example Link
#box {
min-height: 500px;
min-width: 300px;
}Description Link
These properties specify minimum values for either height or width, allowing a box to be larger, but not smaller, than the specified minimum values. They can be used together or individually.
Support Link
Max-Height & Max-Width Link
Example Link
#box {
max-height: 500px;
max-width: 300px;
}Description Link
These properties specify maximum values for either height or width, allowing a box to be smaller, but not larger, than the specified minimum values. They can be used together or individually.
Support Link
Transparent Border Color Link
Example Link
#box {
border: solid 1px transparent;
}Description Link
A transparent border color allows a border to occupy the same space as would be occupied if the border was visible, or opaque.
Support Link
Fixed-Position Elements Link
Example Link
#box {
position: fixed;
}Description Link
This value for the position property allows an element to be positioned absolutely relative to the viewport.
Support Link
Fixed-Position Background Relative to Viewport Link
Example Link
#box {
background-image: url(images/bg.jpg);
background-position: 0 0;
background-attachment: fixed;
}Description Link
A fixed value for the background-attachment property allows a background image to be positioned absolutely relative to the viewport.
Support Link
Bugs Link
IE6 incorrectly fixes the background image in relation to the containing parent of the element that has the background set, therefore this value only works in IE6 when its used on the root element.
Property Value “inherit” Link
Example Link
#box {
display: inherit;
}Description Link
Applying the value inherit to a property allows an element to inherit the computed value for that property from its containing element.
Support Link
Bugs Link
IE6 and IE7 do not support the value inherit except when applied to the direction and visibility properties.
Border Spacing on Table Cells Link
Example Link
table td {
border-spacing: 3px;
}Description Link
This property sets the spacing between the borders of adjacent table cells.
Support Link
Rendering of Empty Cells in Tables Link
Example Link
table {
empty-cells: show;
}Description Link
This property, which only applies to elements that have their display property set to table-cell, allows empty cells to be rendered with their borders and backgrounds, or else hidden.
Support Link
Vertical Position of a Table Caption Link
Example Link
table {
caption-side: bottom;
}Description Link
This property allows a table caption to appear at the bottom of a table, instead of at the top, which is the default.
Support Link
Clipping Regions Link
Example Link
#box {
clip: rect(20px, 300px, 200px, 100px)
}Description Link
This property specifies an area of a box that is visible, making the rest “clipped”, or invisible.
Support Link
Bugs Link
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 Link
Example Link
p {
orphans: 4;
}
p {
widows: 4;
}Description Link
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 Link
Page Breaks Inside Boxes Link
Example Link
#box {
page-break-inside: avoid;
}Description Link
This property specifies whether a page break should occur inside of a specified element or not.
Support Link
Outline Properties Link
Example Link
#box {
outline: solid 1px red;
}Description Link
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 Link
Alternative Values for the Display Property Link
Example Link
#box {
display: inline-block;
}Description Link
The display property is usually set to block, inline, or none. Alternative values include:
inline-blockinline-tablelist-itemrun-intabletable-captiontable-celltable-columntable-column-grouptable-footer-grouptable-header-grouptable-rowtable-row-group
Support Link
Handling of Collapsible Whitespace Link
Example Link
p {
white-space: pre-line;
}
div {
white-space: pre-wrap;
}Description Link
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 Link
Other Miscellaneous Techniques
Media Types for @import Link
Example Link
@import url("styles.css") screen;Description Link
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 Link
Bugs Link
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 Link
Example Link
h2 {
counter-increment: headers;
}
h2:before {
content: counter(headers) ". ";
}Description Link
This CSS technique allows auto-incrementing numbers to appear before specified elements, and is used in conjunction with the before pseudo-element.
Support Link
Quote Characters for Generated Content Link
Example Link
q {
quotes: "'" "'";
}
q:before {
content: open-quote;
}
q:after {
content: close-quote;
}Description Link
Specifies the quote characters to use for generated content applied to the q (quotation) tag.
Support Link
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 Link
- Doesn’t support styling of the
<abbr>element - Doesn’t support classes and IDs that begin with a hyphen or underscore
<select>elements always appear at the top of the stack, unaffected byz-indexvalues:hoverpseudo-class values are ignored if anchor pseudo-classes are not in the correct order (:link,:visited,:hover)- An
!importantdeclaration on a property is overridden by a 2nd declaration of the same property in the same rule set that doesn’t use!important heightbehaves likemin-heightwidthbehaves likemin-width- Left and right margins are doubled on floated elements that touch their parents’ side edges
- Dotted borders appear identical to dashed borders
line-throughvalue fortext-decorationproperty appears higher on the text than on other browsers- 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-type - List items with a specified
list-style-imagewill not display the image if they are floated - Offers only partial support for
@font-face - Some selectors will wrongly match comments and the doctype declaration
- If 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 Link
- 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-type - List items with a specified
list-style-imagewill not display the image if they are floated - Offers only partial support for
@font-face - Some 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 Link
- Details of Changes in Internet Explorer 88
- CSS Compatibility for Internet Explorer (MSDN)9
- CSS Improvements in Internet Explorer 8 (MSDN)10
- Internet Explorer Exposed – CSS Bugs @ Position Is Everything11
- SitePoint CSS Reference12
- CSS Contents and Browser Compatibility13
- 10 Useful CSS Properties Not Supported By Internet Explorer14
Footnotes Link
- 1 http://marketshare.hitslink.com/browser-market-share.aspx?qprid=0
- 2 http://www.w3schools.com/browsers/browsers_stats.asp
- 3 #selectors
- 4 #pseudo_classes
- 5 #property
- 6 #other
- 7 #bugs
- 8 http://www.howtocreate.co.uk/ie8.html
- 9 http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx
- 10 http://msdn.microsoft.com/en-us/library/cc304082(VS.85).aspx
- 11 http://www.positioniseverything.net/explorer.html
- 12 http://reference.sitepoint.com/css
- 13 http://www.quirksmode.org/css/contents.html
- 14 http://www.impressivewebs.com/10-useful-css-properties-not-supported-by-internet-explorer/
Hold on tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Oxford, on March 15—16, with smart design patterns and front-end techniques.
