Menu Search
Jump to the content X
X

CSS Differences in Internet Explorer 6, 7 and 8

Advertisement

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.

Screenshot

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

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
IE6
No
IE7
Yes
IE8
Yes
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
IE6
No
IE7
Yes
IE8
Yes
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
IE6
No
IE7
Yes
IE8
Yes

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
IE6
No
IE7
Yes
IE8
Yes
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
IE6
No
IE7
Yes
IE8
Yes

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
IE6
No
IE7
Yes
IE8
Yes

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
IE6
No
IE7
Yes
IE8
Yes

: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
IE6
No
IE7
Yes
IE8
Yes

: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
IE6
No
IE7
Yes
IE8
Yes
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
IE6
No
IE7
No
IE8
Yes

: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
IE6
No
IE7
No
IE8
Yes

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
IE6
No
IE7
Yes
IE8
Yes

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
IE6
No
IE7
Yes
IE8
Yes

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
IE6
No
IE7
Yes
IE8
Yes

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
IE6
No
IE7
Yes
IE8
Yes

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
IE6
No
IE7
Yes
IE8
Yes

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
IE6
No
IE7
Yes
IE8
Yes
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
IE6
No
IE7
No
IE8
Yes
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
IE6
No
IE7
No
IE8
Yes

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
IE6
No
IE7
No
IE8
Yes

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
IE6
No
IE7
No
IE8
Yes

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
IE6
No
IE7
No
IE8
Yes
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
IE6
No
IE7
No
IE8
Yes

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
IE6
No
IE7
No
IE8
Yes

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
IE6
No
IE7
No
IE8
Yes

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-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 Link
IE6
No
IE7
No
IE8
Yes

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
IE6
No
IE7
No
IE8
Yes

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
IE6
No
IE7
No
IE8
Yes
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
IE6
No
IE7
No
IE8
Yes

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
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 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 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 !important
  • height behaves like min-height
  • width behaves like min-width
  • Left and right margins are doubled on floated elements that touch their parents’ side edges
  • Dotted borders appear identical to dashed borders
  • line-through value for text-decoration property 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-image will 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-image will 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

Smashing Book #5

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? For example, Smashing Book 5, packed with smart responsive design patterns and techniques.

↑ Back to top Tweet itShare on Facebook

Louis Lazaris is a freelance web developer and author based in Toronto, Canada. He blogs about front-end code on Impressive Webs and curates Web Tools Weekly, a weekly newsletter for front-end developers.

Advertisement
  1. 1

    Basically, IE6 is crap… nice article though.

    1
  2. 2

    Great article.

    Especially good to know which features IE7 and 8 support. IE6’s bugs/lack of features are usually very well known by web developers, but IE7 and IE8 have slipped under the radar a bit. Now that a lot of projects are dropping testing for IE6, we need to focus on the new baseline: IE7.

    1
  3. 3

    Use Dean Edwards’ IE7/8.js and you can make a lot of these incompatibilities go away.

    -1
  4. 4

    Very good article as usually!

    Let me add for the IE6 Bugs:
    # Left and right margins are doubled on floated elements that touch their parents’ side edges
    – this is fixed by adding display:inline;
    # Dotted borders appear identical to dashed borders
    – this is fixed by using a 2px border: border: 2px dotted #000;

    2
  5. 5

    All of you looking to reliably test across different IE versions should consider the Internet Explorer Application Compatibility VPC Image by Microsoft.

    It contains Virtual PC compatible system images that allow you to perform tests in native IE environments version 6 SP3 and up. Images for IE7 & 8 are available in combination with both XP and Vista.

    Virtual PC is available for free as well here.

    Happy testing :).

    0
  6. 6

    Great article!!

    0
  7. 7

    Would be great if solution is also provided..and expecting css differences between ie and firefox.

    0
  8. 8

    Thanks, great article. Luckily, IE6 is dying.
    According to w3schools statistics 12% use IE6 and decreasing every month.
    I personally use Stop IE6 widgets now and I feel FREE!!

    -1
  9. 9

    2nd THAT! Markus.. fantastic article

    btw IE6 is crap =]

    -1
  10. 10

    Very useful article. Thank you, Louis.

    0
  11. 11

    @Irene: The problem is that not everyone has the option of upgrading their browser. When I’m at work, it’s kind of annoying to see messages saying “hey dummy, upgrade your browser!” when I have no control over what’s installed.

    Anyway, thanks Louis, that’s a useful article.

    0
  12. 12

    The problem with IE 6 is that some large companies still use it and their users cannot upgrade. I always test my work in IE6 because they are a big piece of my customers.

    EDIT: Riccardo is a perfetc example of what I mean,

    0
  13. 13

    another awesome post ?

    0
  14. 14

    Very useful for the UI guys.. Thanks a lot.

    0
  15. 15

    Fantastic article, much appreciated.

    0
  16. 16

    Very nice article. Just like to add a couple of tricks I use on a regular basis to ease the pain of cross-IE support:

    #1 Develop with Firefox then fix IE rendering ;-)
    #2 Use IEtester to visualize rendition across the different versions of IE
    #3 Use the adequate meta to force IE8 in standard compliant mode
    #4 Use alternative CSS using conditional comments (http://msdn.microsoft.com/en-us/library/ms537512%28VS.85%29.aspx)

    Hope this helps

    1
  17. 17

    Really useful – helped me with something I was just working on! Cheers

    1
  18. 18

    Great article, nice to have all of this info in one place. I agree with Sandstream, the problem is large companies/organisations who cannot upgrade from IE6, has anyone forced Google Chrome Frame on them yet?

    1
  19. 19

    IETester is a great tool to test the different IE versions.

    -1
  20. 20

    Thank god IE6 is dying! It was the biggest misstake Microsoft ever made. Developers Designers had to do all sorts of weird workarounds, just to get the design equal in all browsers.

    -1
  21. 21

    Wow, IE6 doesn’t support anything, what a surprise. Only Microsoft can screw multiple browsers up.

    -2
  22. 22

    EXCELLENT! merci! thank you! gracias! o brigado! nice article.

    -1
  23. 23

    it is imperative that developers do thorough testing in all standards compliant browsers

    There I corrected that for you. I didn’t read any further, because unless we get standards IN our way there is no point in grieving about IE and its crappiness.

    0
  24. 24

    For having chained classes in IE6, try reversing the order of classes.

    .class2.class1 {…}

    0
  25. 25

    @housetier:

    Try telling your client that you’re only going to test their website in standards compliant browsers! :)

    @daniel:

    I’ll have to check to make sure, but I don’t think that will work. The purpose of chained classes is to apply styles to an element that has ALL the classes in the chain, not just the first or last class, which is what IE6 does.

    0
  26. 26

    Great article! I must admit I’ve never used orphans and widows, but then my work doesn’t usually require sites to be printable.

    You mentioned that IE7 doesn’t support inline-block, but that’s not entirely true. There is a bug that means it doesn’t support inline-block on an element with a default value of ‘block’, but those elements that have a default of ‘inline’ – such as span, href, img etc. – will accept the inline-block value instead…

    Oh, and may I join everyone else in berating Microsoft for Internet Explorer in general. It’s truly the worst. Even IE8 has more unacceptable bugs than I could fit in this comment.

    -1
  27. 27

    This differences will excist the next 5 years, because Microsoft is going to support the Internet Explorer 6 until 2014.

    By the way, nice CSS-Overview!

    0
  28. 28

    To sum up this article, IE 6 sucks and no body should still be using it.

    Otherwise great article :)

    -1
  29. 29

    Hey, whaddaya know… IE7 is pants too. Ooh, and IE8.

    -1
  30. 30

    Add all these differences in IE6 again and Microsoft should automatically update IE6 to IE8… no need to ask end users …

    Good to know the differences … good article…

    0

↑ Back to top