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 share1 combined across all their currently used browsers. In the web development community, this number is much lower, showing about a 40% share2.

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

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

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

Footnotes Link

  1. 1 http://marketshare.hitslink.com/browser-market-share.aspx?qprid=0
  2. 2 http://www.w3schools.com/browsers/browsers_stats.asp
  3. 3 #selectors
  4. 4 #pseudo_classes
  5. 5 #property
  6. 6 #other
  7. 7 #bugs
  8. 8 http://www.howtocreate.co.uk/ie8.html
  9. 9 http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx
  10. 10 http://msdn.microsoft.com/en-us/library/cc304082(VS.85).aspx
  11. 11 http://www.positioniseverything.net/explorer.html
  12. 12 http://reference.sitepoint.com/css
  13. 13 http://www.quirksmode.org/css/contents.html
  14. 14 http://www.impressivewebs.com/10-useful-css-properties-not-supported-by-internet-explorer/

↑ 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

    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;

    1
  2. 2

    Basically, IE6 is crap… nice article though.

    0
  3. 3

    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.

    0
  4. 4

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

    0
  5. 5

    Great article!!

    0
  6. 6

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

    0
  7. 7

    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
  8. 8

    2nd THAT! Markus.. fantastic article

    btw IE6 is crap =]

    -1
  9. 9

    Very useful article. Thank you, Louis.

    0
  10. 10

    @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
  11. 11

    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
  12. 12

    another awesome post ?

    0
  13. 13

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

    0
  14. 14

    Fantastic article, much appreciated.

    0
  15. 15

    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
  16. 16

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

    1
  17. 17

    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
  18. 18

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

    -1
  19. 19

    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
  20. 20

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

    -2
  21. 21

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

    -1
  22. 22

    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
  23. 23

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

    .class2.class1 {…}

    0
  24. 24

    @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
  25. 25

    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
  26. 26

    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
  27. 27

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

    Otherwise great article :)

    -1
  28. 28

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

    -1
  29. 29

    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
  30. 30

    nice!!!

    0
  31. 31

    @Rob W is correct, IE7 and even IE6 have partial support for inline-block

    0
  32. 32

    I think people forget that it was IE6 that allowed us to move over to CSS-based layouts in the first place. It fixed IE’s broken box model, and really opened the door to standards. Yes it has ALOT of problems now, but that is because it is old. It did good things for the industry when it came out, and I think that we should remember that. I would love for everybody to upgrade tomorrow, but that said I also understand that the users that can’t or don’t upgrade just want their sites to work and could care less about us tech geeks moaning about old software.

    0
  33. 33

    @Jason Zipperer:

    You’re absolutely right. In fact, if you read Jeffrey Zeldman’s 1st version of Designing with Web Standards (published in 2003), you’ll see that he constantly refers to IE6 as the most standards-compliant browser on the market.

    0
  34. 34

    The moral of the story here is to use simple styles so that your sites don’t break in IE6.

    0
  35. 35

    One of the best ever articles from you guys! Great job!

    College Student Notes

    0
  36. 36

    This is a very helpful article, thank you!!!

    0
  37. 37

    IMO @Andrew, the moral is to only use CSS 2.1 selectors for progressive enhancement, and never for things that will make the site unusable for people using IE6.

    Examples: to change the color, add a background, etc.

    We should not motivate any webdesigner or front-end-developer to *not* use these. Styling a website’s markup is as much about looking back on IE6 (and before) as it is about preparing it for the future.

    0
  38. 38

    IE 6 sux!

    very helpful this article! thanks

    Sinceramente quando o cliente fala que o site está ‘quebrado’ eu já penso logo porcaria de IE6…

    -1
  39. 39

    big thank for this info.

    0
  40. 40

    Strange a:hover descendant selector worked always for me in IE6. It’s partially used to create dropdown menus, for example see cssmenus.co.uk.

    0
  41. 41

    Thanks! Great article.

    0
  42. 42

    Not really any useful information there. Basically, every single item is IE6 = NO, IE8 = YES, so you need to plan for not working… How is that different from the way we’ve been developing since IE6 first came out?

    1
  43. 43

    …and those are just the css issues; try setting an input id with the same name as another input’s name attribute

    -1
  44. 44

    Great article, very useful for a current initiative. It would be great to see FireFox 3.5 added to these comparisons.

    0
  45. 45

    Nice post… and when IE 9 arrives make an article about all 4 crap browsers and their incompatibilities.

    It is very sad for such articles to even exist and the worst part is that we (web developers) have to read it either we like it or not.

    -1
  46. 46

    Good article but I’ve never had a problem with a:hover span in IE6 before. Sadly makes me doubt the other items listed. For anyone who doesn’t know of it, check out Quirksmode

    0
  47. 47

    Very good article for reference. Thanks!

    I am finding with the clients that I work with, IE6 is becoming less of an issue because their end-users are mostly using 7 and 8. Although 6 will still be around for awhile, at some point we need to cut the strings like we have done with IE5.

    0
  48. 48

    When my boss or a client insists I’ll make the site perfect in IE6, usually I just fix the big errors.

    When they tell me IE6 can go f itself, I do a little victory dance.

    0
  49. 49

    Far quicker just to pop

    @;/*

    in your code, hey presto no more IE6 visitors….

    -1
  50. 50

    It’s about time!

    0

↑ Back to top