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 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 & Inheritance

Child Selectors

body>p {
  color: #fff;

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.


In IE7, the child selector will not work if there is an HTML comment between the parent item and the child.

Chained Classes

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

Chained classes are used when the same HTML element has multiple classes declared, like this:

<div class="class1 class2 class3">
<p>Content here.</p>

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

a[href] {
  color: #0f0;

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.


Adjacent Sibling Selectors

h1+p {
  color: #f00;

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:

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


In IE7, the adjacent sibling selector will not work if there is an HTML comment between the siblings.

General Sibling Selectors

h1~p {
  color: #f00;

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.


Pseudo-Classes and Pseudo-Elements

Descendant Selector After :hover Pseudo-Class

a:hover span {
  color: #0f0;

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.


Chained Pseudo-Classes

a:first-child:hover {
  color: #0f0;

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.


:hover on Non-Anchor Elements

div:hover {
  color: #f00;

The :hover pseudo-class can apply a hover, or rollover state, to any element, not just anchor tags.


:first-child Pseudo-Class

div li:first-child {
  background: blue;

This pseudo-class targets each specified element that is the first child of its parent.


In IE7, the first-child pseudo-class will not work if an HTML comment appears before the targeted first child element.

:focus Pseudo-Class

a:focus {
  border: solid 1px red;

This pseudo-class targets any element that has keyboard focus.


:before and :after Pseudo-Elements

#box:before {
  content: "This text is before the box";
#box:after {
  content: "This text is after the box";

This pseudo-element places generated content before or after the specified element, used in conjunction with the content property.


Property Support

Virtual Dimensions Determined by Position

#box {
  position: absolute;
  top: 0;
  right: 100px;
  left: 0;
  bottom: 200px;
  background: blue;

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.


Min-Height & Min-Width

#box {
  min-height: 500px;
  min-width: 300px;

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.


Max-Height & Max-Width

#box {
  max-height: 500px;
  max-width: 300px;

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.


Transparent Border Color

#box {
  border: solid 1px transparent;

A transparent border color allows a border to occupy the same space as would be occupied if the border was visible, or opaque.


Fixed-Position Elements

#box {
  position: fixed;

This value for the position property allows an element to be positioned absolutely relative to the viewport.


Fixed-Position Background Relative to Viewport

#box {
  background-image: url(images/bg.jpg);
  background-position: 0 0;
  background-attachment: fixed;

A fixed value for the background-attachment property allows a background image to be positioned absolutely relative to the viewport.


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”

#box {
  display: inherit;

Applying the value inherit to a property allows an element to inherit the computed value for that property from its containing element.


IE6 and IE7 do not support the value inherit except when applied to the direction and visibility properties.

Border Spacing on Table Cells

table td {
  border-spacing: 3px;

This property sets the spacing between the borders of adjacent table cells.


Rendering of Empty Cells in Tables

table {
  empty-cells: show;

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.


Vertical Position of a Table Caption

table {
  caption-side: bottom;

This property allows a table caption to appear at the bottom of a table, instead of at the top, which is the default.


Clipping Regions

#box {   
    clip: rect(20px, 300px, 200px, 100px)   

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


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

p {
  orphans: 4;
p {
  widows: 4;

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.


Page Breaks Inside Boxes

#box {
  page-break-inside: avoid;

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


Outline Properties

#box {
  outline: solid 1px red;

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.


Alternative Values for the Display Property

#box {
  display: inline-block;

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

Handling of Collapsible Whitespace

p {
  white-space: pre-line;
div {
  white-space: pre-wrap;

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.


Other Miscellaneous Techniques

Media Types for @import

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

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


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

h2 {
  counter-increment: headers;
h2:before {
  content: counter(headers) ". ";

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


Quote Characters for Generated Content

q {
  quotes: "'" "'";
q:before {
  content: open-quote;
q:after {
  content: close-quote;

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


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

  • 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


  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 topShare on Twitter

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.


Note: Our rating-system has caused errors, so it's disabled at the moment. It will be back the moment the problem has been resolved. We're very sorry. Happy Holidays!

  1. 1

    Basically, IE6 is crap… nice article though.

  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.

  3. 3

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

  4. 4

    Great article!!

  5. 5

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

  6. 6

    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!!

  7. 7

    2nd THAT! Markus.. fantastic article

    btw IE6 is crap =]

  8. 8

    Very useful article. Thank you, Louis.

  9. 9

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

  10. 10

    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,

  11. 11

    another awesome post ?

  12. 12

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

  13. 13

    Fantastic article, much appreciated.

  14. 14

    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

  15. 15

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

  16. 16

    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?

  17. 17

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

  18. 18

    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.

  19. 19

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

  20. 20

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

  21. 21

    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.

  22. 22

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

    .class2.class1 {…}

  23. 23


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


    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.

  24. 24

    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.

  25. 25

    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!

  26. 26

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

    Otherwise great article :)

  27. 27

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

  28. 28

    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…

  29. 29
  30. 30

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

  31. 31

    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.

  32. 32

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

  33. 33

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

  34. 34

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

    College Student Notes

  35. 35

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

  36. 36

    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.

  37. 37

    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…

  38. 38

    big thank for this info.

  39. 39

    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.

  40. 40

    Thanks! Great article.

  41. 41

    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?

  42. 42

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

  43. 43

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

  44. 44

    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.

  45. 45

    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

  46. 46

    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.

  47. 47

    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.

  48. 48

    Far quicker just to pop


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

  49. 49

    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;

  50. 50

    It’s about time!

  51. 51

    This is one of the most useful articles I’ve ever seen from Smashing. I’ve been looking for a comprehensive list like this forever.

  52. 52

    this definetly shows how bad ie6 is… good overview

  53. 53

    “a:hover span” works in IE6 if set rules for “a, a span”

  54. 54

    Concerning IETester, I for myself had to come to the conclusion that it does NOT render pages as it should.
    For example if you compare a page in IE6/IETester and a native running IE6 (in Fusion oder VirtualBox) you might notice differences in rendering (espcially when dealing with png).

    If you really need a page to be “IE6-compliant” there is no other way than to actually test it on a native IE6.

    IETester is a quick and good tool for ironing out the biggest displaying bugs. If it just wouldn’t crash that often ;-)

  55. 55

    IE6 is not a bad browser, haha…. It’s a great post.
    Thanks to share it!

  56. 56

    Rob: “hey presto no more IE6 visitors…”

    If you’re creating a commercial site, there’s no way you would want to limit your audience like that.

    Generally, I’ll code in Firefox and make sure it works in IE8 and Opera. I’ll then see how well it’s working in IE7 and IE6, and tweak to make the site functional as required. I’m ok with the site not looking as nice under IE6, but I’ll make sure it can still be used.

  57. 57

    Death to IE 6!!! Thanks for this article, it’ll be useful to compare what’s supported, etc. I really hate IE 6. It’s 8 years old!

  58. 58

    For those who are saying that a descendant selector after a :hover pseudo-class works in IE6, I would like to see a working example of that. Here is an example link:

    IE6 hover test

    Visit the page above, and test the hover in IE6 and you’ll see it doesn’t work. Now, if there’s something I’m missing here, then I’d be happy to retract, but as far as I understand, hover does not work on any element in IE6 except directly on an anchor.

  59. 59

    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 :).

  60. 60

    Once businesses take a huge interest in upgrading to windows 7 then finally we can turn to IE6 and wave goodbye.
    Personally I don’t write sites to support it.
    NB – in my analytics of sites that are for business users to read – about 40% still using ie6 as they are dictated (or dont care) by the PC supplied in the office.

  61. 61

    Great article! Thanks for the info!!

    What I don’t understand is with all the updating that PCs do on a regular basis, why isn’t browser updating part of it? Why must it be put upon the user to manually ungrade? Firefox does it every time a new version comes out.

  62. 62

    IE6… ditch it already…

  63. 63

    What a great article! Keep it up Smashing…

  64. 64

    I believe there is an error in this post – IE6 does support :hover on anchor elements. Further, display:inline-block does work only for inline elements (spans, etc. – not sure if it works on IE6, but I know for sure it works for IE7).

  65. 65

    Isn’t IE 6 Dead Already? let me guess caveman still around…
    big companies don’t upgrade because that’s how their old fart IT’s make money.

  66. 66

    Cesar Mujica Castro

    October 14, 2009 7:59 am

    I´m a student. This article will be very useful.

  67. 67

    Very, very useful comparison. Thanks a bunch for pulling all this info together in one place.

  68. 68

    What I don’t understand are these numbers and why the very so much:
    IE6: 24%
    Compared with
    IE6: 12%

    That’s a huge difference in numbers, I hope the 12% figure is correct

  69. 69

    Good article which hopefully will encourage use of the more advanced selectors. However lets not let Microsoft sit on their laurels with the launch of IE8, we should all be pushing for adoption of CSS3 and HTML5 so in a couple of years we’re not grumbling about IE’s lack of support for features already available in Firefox, Chrome & Safari etc such as box shadows, rounded corners, opacity etc

  70. 70

    Well, since IE6 is still the baseline… looks like we can’t use anything in this post… ugh. Browser statistics show a nice steady drop of IE6 1 to 2 percent each month this year… let’s hope the trend continues. Another good post, but was sad to see “NO” in every single category for IE6. I agree with Zapix… these IT folks need to up their game, and quit building these companies systems around a browser that is obsolete… what are they thinking?

  71. 71

    Just to clarify a few things regarding :hover and inline-block:

    IE6 does not support :hover on any element except the “a” tag. The article does not say that IE6 lacks support for :hover on “a”. It says that it does not support :hover as the preliminary element in a descendant selector. See my previous comment for an example link that demonstrates this.

    Regarding inline-block, since IE6 and IE7 do not fully support inline-block, I left them as non-supportive in the chart. In other words, for the purposes of this article, I was not going into details on “partial” support, so that particular item could have gone either way, however, since the other “display” values are not supported at all, then it is safe to say that IE6 and 7 do not support “alternative” values for “display”.

    But thanks for the input. Maybe after we receive more comments on this article, we’ll add a few notes to clarify a few items further.

  72. 72

    It’s nice to have all CSS IE differences in one article. Great job!

  73. 73

    It is our duty to inform the public about IE6. Use IE6 NO MORE on your website and spend less time debugging.

    My new method is to offer IE6 support as an optional feature for clients. If they want to save some hours of my time and save some money they can choose to use IE6 NO MORE.
    (This hasn’t come up with any of clients yet because my sites tend to not have rendering issues.)

  74. 74

    Handy article. Just to correct a quick error, this does work in IE6:

    a:hover span {
    color: #0f0;

    It’s not mentioned above but IE8 (yes the new one) doesn’t support ‘border’ properly. So you have to use ‘outline’ instead.

    Someone mentioned the browsers stats from W3C Schools, the issue there is that site only gets visits from developers, hence such a high figure for Firefox.

    In the UK, IE6 is the major browser for Business to Business websites. One client stated that IE6 currently accounts for 70% of their traffic!

  75. 75

    IE6 should banned from all PC :P

  76. 76

    Haha – so basically IE6 cant do anything. I wish we could stick it in room 101!

  77. 77

    From Sitepoint’s CSS reference:

    “In Internet Explorer 5.5 and 6, this combinator [the “descendant” selector] doesn’t work after a :hover pseudo-class.”

    Quoted from Descendant selector info on Sitepoint’s reference.

  78. 78

    Any tips on the best way to manage multiple installations of IE if you design primarily on a single workstation? Must you use VMs?

  79. 79

    why on earth are people still using IE6

  80. 80

    i hate ie 6 . i dont know why ie 6 update as ie 7 as firefox

  81. 81

    Great post! I personaly stopped supporting ie6 but i do display a message on top of websites i do explaining why it would be 100% good to switch to a more modern browser.

  82. 82

    Who cares if Microsoft are gonna support it until 4014 or whatever, doesn’t mean we have to. The more of us who stop supporting it the more users will be forced to upgrade.

    I take the point about business to business websites/users but Microsoft is only supporting them because of Sharepoint and intranet nonsense. I blame the Sharepoint team/devision for prolonging this mess.

    I believe that the IE team are trying to do good things and understand where the net is going (IE8 is a massive leap forward all considered) only to be forced to include such bizarreness as ‘Compatibility Mode’ due to the weight and corrupt bureaucracy of the Microsoft Business Unit so that Sharepoint doesn’t throw a fit.

    (Deep breathe) and relax.

  83. 83

    Reading this article and seeing all the CSS selectors that IE 7 and 8 support makes me realize that I need to brush up on my CSS skills!

  84. 84

    This is a long list of reasons why IE6 should be banned!

    Great post!

  85. 85


    I hope people here will see this: Clip works perfect on IE6.
    Just need to use it without comas. (10 20 10 10)


  86. 86

    RIPIE6 <– found yesterday :D

  87. 87

    Pretty strong case that IE 6 Supports nada damn thing!! Good work!

  88. 88

    @ John Faulds: RE: Dean Edwards’ IE7/8.js = AWESOME.
    @ Sandstream: Yes, unfort. I have to aghee with you on this one. If we could get them (corp. and gov.) to upgrade atleast to ie7 it would make our lives easier.
    @Vincent : is that Room101 a referance to the book 1984?…

    I am complete agreement about the IE6 needs dumped like the kleft overs in teh fridge for a month. IE6 for me is extra work = extra time = extra cost. I actually supported MS’s push of IE8 in the Windows automatic updates, no-one, NO-ONE, should have said a word and just let it go; esp. IT departments…

    BTW, once again another great article from SM!

  89. 89

    great article ;)

  90. 90

    Thanks for this reference, this is a good help when finish a project and need to go back to start hacking for IE6. Please lmk when IE6 is completely out of the market.

  91. 91

    I don’t develop sites for IE6 for my freelance clients anymore. My company however must continue to support IE6.

    A good old server-side IE6 sniffer giving a user the alternative to upgrade is the way to go.

  92. 92


    Thanks for mentioning that. Under “clipping regions” I mentioned that it works in IE7 with the wrong syntax (spaces), but that should also include IE6. I’ve sent a note to SM for a correction.

    Everyone should keep in mind that using spaces for the clip property will make your CSS invalid, but will work cross-browser.

  93. 93

    Per bluecherry’s comment above, IE Tester is unreliable. Get a copy of Microsoft Virtual PC & download the IE6, IE7, IE8 VPC images to test IE installations.

    For everyone discussing IE6 & IE7 not fully supporting display : inline-block, neither does Firefox 2.. To have IE6/IE7 (for naturally inline elements), & FF2 work with the display : inline-block style you must do this:

    a {
    display : -moz-inline-box;
    display : inline-block;

    And to get IE6 to mimic :hover events on non anchor tags, you can always utilize a behavior file:

    body {
    behavior : url("path/to/your/behaviorFile.htc");

    from within an IE6-specific conditional stylesheet:

  94. 94

    You could power every house on Earth for a few hours– just from the sheer RAGE MSIE elicits from Web Designers. :-)

    Nice to see what does and doesn’t work. Thank you for doing the head bashing for us.

  95. 95

    Thanks for the article.

    Why do people still use IE6? Well, in our organization, we’ve got 5,000 desktops that run a squillion mission critical apps that have to be tested with whatever new browser you want to use before you can switch over. Add several big name, huge dollar, apps that have issues in other browsers. These issues have to be fixed by the vendor before we can contemplate switching. People who say it’s easy to “just upgrade your browser” are talking through their hat. People use their browsers to do more than visit whizzo websites.

  96. 96

    If you still want to torture yourselves and test for IE6, I suggest installing IE Collection:


    It’s a lot simpler than using the VPC image from Microsoft. On the other hand, if you want to be an activist, insert something like this into your website (there are tons of these out there):


    Either choice is commendable…I’m however encouraged by how sites like YouTube will eventually be phasing out IE6 support.

  97. 97

    A great excuse to bin ie6 then.

  98. 98
  99. 99


    More CSS is compatible with IE 8 than IE 7 and 6.

  100. 100

    IE6 has No everywhere! FAIL :D

  101. 101

    You guyz told us the problems… now please tell us how to fix them :)

  102. 102

    IE6 is the best. I wish i still had one.

  103. 103

    IE6 is not bad, just is to older. Its was built at 2002. Gone.

  104. 104

    I am from India and almost 85% of people use IE here(at least whom I have seen and i have seen thousands). Most of them are on IE6 so as far as my clientele goes IE6 still cant be ignored(even a bit). I need some luck!

  105. 105

    Cosa Nostra Design

    October 14, 2009 10:58 pm

    nice article, we can see (again) the poor css support of ie6 but too, progression of the IE family (finally) and that’s a good thing.
    It’s not easy to boycott ie6 when you do a work for a firm, pc are often old and ie6 is the king of the place ;(

  106. 106

    GREAT! I just have one question: What’s CSS?

  107. 107


    The hover descendant selector style only works if the hover itself has a defined effect, so in the aforementioned case you can do something harmless like this:

    a:hover{visibility:visible} or a:hover{display:inline;}

    Hover Descendant Demo
    Hover Quirks Tutorial

    inline-block layout works on block elements in IE as well if you reset the style to inline in a separate rule like this:
    .ie67 .column{display:inline;}
    /* Use conditional comments to add the .ie67 class to the body tag or a wrapper div */

    Inline-Block Demo
    Zoom Method
    Crazy Alternative

    Thanks to Paul O’brien, Stu Nicholls, Bruno Fassino, Hedger Wang, and Peter-Paul Koch

  108. 108

    @Paul Sweatte:

    Thank you for that explanation, now I see what the others were trying to say. I’ve never seen that before, that’s an interesting little workaround. It’s also interesting that Sitepoint’s reference doesn’t mention it. Their stuff is usually quite accurate.

    But as it stands, technically speaking, the descendant selector doesn’t work. I’ll have to add a note to that item indicating that workaround.

    Thanks again.

  109. 109

    Hopefully we’ll see IE6 market share drop much lower now that Win7 is being released – as companies now will have a good reason to upgrade and won’t have compatibilities issues with their in-house apps.

    The world of design and web development will be a nicer one. IE6 is holding back the web…

  110. 110

    Nice article with example. Thanks for sharing :)

  111. 111

    I run everything I do through a few different sites: IENetRender, Adobe’s browserlab (which I just discovered a short while ago), etc. For the really big stuff, I’ll order up a couple dozen shots at browsershots (no idea if this site moderates comments with multiple links in them, so just google if you’re not familiar with those).

    The biggest pain in the ass is conflicts that only primitive versions of IE can’t seem to figure out — such as when it refuses to load a page altogether and gives an error message. And sometimes it’s not even IE — someone I know had his security settings in Windows jacked so high that a Firefox browser in XP interpreted an external javascript loading from jquery as an XSS vulnerability and bailed when loading the page. This was just a test page and I planned to change that anyway, but still, you never know…

    After fleshing out a site in Firefox, I aim for:

    1. Perfection in IEv.8.
    2. Good in IEv.7.
    3. Acceptable Functionality in IEv.6.

    I used to be in one of those workplaces that chained every computer to an antiquated browser, so I know what it’s like. And I also know what my reaction was: “This piece of crap browser isn’t rendering the page correctly, but at least I can read it.” I had no expectation of perfect rendering.

    Some users may be less sophisticated than that, but unless your business client is tailored specifically to a b2b purchase (for instance, selling services to large corporations), the perfect in this case is very much the enemy of the good.

  112. 112


    In ‘Descendant Selector After :hover Pseudo-Class‘ section, I tested your example code, and it works for all IE versions, but you said it doesn’t work on IE6.

    This is your code:

    a:hover span {
    color: #0f0;

  113. 113

    IE6 Bugs … “Doesn’t support classes and IDs that begin with a hyphen or underscore”

    Strictly speaking (at least in HTML4) no browser should. From http://www.w3.org/TR/html4/types.html

    ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens (“-“), underscores (“_”), colons (“:”), and periods (“.”)

  114. 114

    I hate Microsoft for making Internet Explorer. Hell, I hate Microsoft for everything besides the XBox. I vote we shoot IE in the face.

  115. 115

    The simplest solution for making a multi-platform website is to simply boycott Explorer as a whole. To evolve, we must leave the weak in the dust. Survival of the fittest.

  116. 116

    Great article and, once again: KILL IE 6!!!!!!

  117. 117

    Well .. tht proves IE6 is the worst creation … it wont support anything at all .. .

    well it does support a few of the ones that are mentioned as not supported.. i guess it has to do with different service pack versions .

  118. 118

    @lezus: How’s school these days? I assume that’s where you are, since you’re painfully unfamiliar with how things work in the real world.

  119. 119


    to say frankly you guys should know that ie 6 was was founded in 1995 and the css version 2 was released on 1998, thats why ie 6 is strugling with css 2. Hacking css makes ie 6 works better in some cases.
    In my experience I worked out chained classes in ie 6. Please try this to use chained classes

    Put commas after the class name to use multiple classes for a single div.

    .class1, .class2, .class3 { background: #fff; } – correct
    .class1.class2.class3 { background: #fff; } – wrong

    Content here

    Anyway thank you (author) for the useful article.

  120. 120

    Next time your client asks “You showed me the page 2 weeks ago, why isn’t it up yet?!?”, show them this: http://www.busitones.com/WebDesignTimeBreakdown.png

  121. 121
  122. 122

    No surprise that IE6 doesn´t work like he should do ;-) Informative though …

  123. 123

    Descendant Selector After :hover Pseudo-Class
    a:hover span { color: #0f0; }

    This is wrong, actually it’s possible width IE6 too !
    Exemple :
    a span { color :red; }
    a:hover { _border: 0px solid red } /* to fix IE6 bug */
    a:hover span { color: green; }


  124. 124

    There is a little mistake, your forget the ‘clip: ‘ in your example

    Clipping Regions

    view plaincopy to clipboardprint?
    #box {
    CLIP: rect(20px, 300px, 200px, 100px)

  125. 125

    It is interesting that you write about CSS support, yet your website does not show well in some browsers.

  126. 126

    Great read, one of the better articles on CSS support throughout MS browsers.
    Was familliar with most of them, but still a good read to refresh my memory! :)

  127. 127

    I hope the errors mentioned in the comments above will soon be corrected in the article. e.g. ‘a:hover span’ actually works in IE6 as mentioned by Gonzo. Would be nice to have that article in a simple table, too.

  128. 128

    I hope the errors mentioned in the comments above will soon be corrected in the article. e.g. ‘a:hover span’ actually works in IE6 as mentioned by Gonzo. Would be nice to have that article in a simple table, too.

  129. 129

    http://www.stopie6.com/ :)
    I dropped support for IE6 on all my sites. It’s not worth waste of any time now. Nice to know some new things about IE7.

  130. 130

    finally, a very good article on IE, which – in any version – will eventually drive any web developer insane. just one thing: i used inline-block on IE in some cases, Rob W is right.

  131. 131

    great article! excelent and handy overview, putting in delicious right now :) Thanks

  132. 132

    thank you for thar article! great!

  133. 133

    This is really a very wonderful post. I hate IE 6.

  134. 134

    Vijai Prakash Maurya

    October 15, 2009 1:43 am

    Very Nice article about comparision of different version of IE, Its very useful for web developers

  135. 135

    I love reading comments! LOL… IE 6 is super crap! … nice article learn something today

  136. 136

    “IE6/7 bugs : List items with a specified list-style-image will not display the image if they are floated”

    In fact, it’s not really a bug, this is what the specs actually describe in CSS2.

    The specs has changed that in CSS2.1 :

    Changed rules to convert ‘display’ not always to ‘block’, but to an appropriate block-level display value as given by a mapping table.
    Added rule 4 to convert root element’s ‘display’ value according to the mapping.

    Specified value > Computed value
    others > same as specified

    In CSS2, where there were no mapping table, list-item had to be converted to blocks, and by consequence didn’t had any list-specific properties anymore.

  137. 137

    I know you like to tell what everybody are saying without thinking. I know it’s a common habitus, however, well…

    1º IE6 isn’t crap. It’s old. The standards back there were not well supported. (Today, there are still not well supported, but it’s better.)

    2º Recall that FF2 wasn’t that better either. So try to loose the focus over ie6. Do you recall other browsers back there?

    3º Telling that IE6 is crap will not solve any issues, and will not accelerate his extinction, because, besides css developers, anyone else don’t really seams to care, hence, ending up blaming the poorly site design anyway. So, my best bet on this is actually:
    try to understand the issues, in order to solve them, instead of avoiding them.

    4º Telling IE6 is crap, for almost all, is a sign of ignorance. And it’s also a common judgement: “I don’t understand something, so, I will tend to say that THAT something is crap”. In other words, when you understand why the bugs are there, and when you actually find a solution to a bug (find, not copy. Anyone?), then, at that point, even if you still think of crap, you will think it in a more respectable manner. What for? Well, that will actually help the community to evolve. Towards what? The standards. So with this atitude, what do I get? Nothing? Yes. So who is crap now? You. Gash, Really? Yup. Sorry.

    5º If all the developers who have contributed for the comprehension of the hasLayout issue, for example, if they were on the “IE6 crap so I don’t care” mood, maybe today, we were still seeing the same inconsistencies on ie8. But worst of all, if we follow that path of ignorant intolerance over what we cannot understand because it’s hard to understand and dig in on those things, then, the future issues that we will found(because they will arrive for sure), will not have so much solvers at end.


  138. 138

    IE 6 is a major pain in the rear but our site stats shows that 29.7% of the visits come from IE6, on a worldwide scale that is way to high to just ignore!

    Anyway, where’s the fun if it all works perfectly?

    Good article, now you need to publish a list of workarounds.

  139. 139

    Hello moderator.
    No need to validate this comment, but why is my previous one still “awaiting validation” ? lost in spam ?

  140. 140

    It is nice article, can you please tell me about .png image support for browsers because most IE version doesn’t support .png images

    With Regards,
    Sonam S. Diwate
    Web Developer / Designer

  141. 141

    Sebastian Gebhard

    October 15, 2009 4:11 am

    Graceful degredation is the key. I develop websites for modern browsers and afterwards i adjust css so that the website can be USED in older browsers (e.g. drop down navigation opens etc).
    For rounded corners I will never use images. Just use the CSS3 properties. If old browsers show square-cut corners.. who cares? When people realize that web is much nicer in modern browsers they will finally switch.

  142. 142

    I bookmarked this.
    I bet, this will solve some pain for desginers. A single-look comparison is always a good one.
    I really appreciate your work.

  143. 143

    Descendant Selector After :hover Pseudo-Class

    This is actually working in IE6.

    Have you tested it personally, because I have :) – http://bviphotovideo.com (see the Main Navigation for reference).


  144. 144

    While I agree with most of the cases displayed it this article, I cannot miss the fact that there are supported features listed as if they are not. As a web programmer I have often used selectors like “a:hover span”, in many projects, and it works correctly. Also the Outline property typed as a short hand, I even have never thought that I can write it other way, It works just fine. I really don’t have the time to test everything listed here, but mind that the author has some gaps. It is a shame after 9 years of practice!

  145. 145


    Thank you for your comment. If you read the previous comments, you’ll see that the “a:hover span” was discussed. Strictly speaking, it does not work in IE6. But it will work with a small workaround, as we’ve discussed. See my previous comments and the one by Paul Sweatte.

    If you feel there are other items that are incorrect, please specify exactly which ones, with examples if possible, and we will gladly make any necessary changes. We’ll be adding a few notes to the ones that are mentioned in the comments to explain those further.

  146. 146

    Great roundup! Looks like IE6 supports almost nothing, IE7 supports a lot but not newer CSS3, and IE8 supports almost everything.

  147. 147


    Alright let’s begin, at the moment I can point for sure about the “Outline” property, and the mistake is mine, for witch I apologize politely.

    When I read the all the comments after I saw your response
    – “See my previous comments and the one by Paul Sweatte.”

    I realized that you don’t count partial support as if it has any. So we are both correct, but I really think it will be good to note this in the head section of your article. Not everyone reads all posts (like me), and since this is Smashing Magazine I guess till tomorrow they will be so many that they will be unreadable.

    So with this said we exclude partial support, I agree with you.

  148. 148

    IE is some sort of evil mockery on standards.

  149. 149

    In IE6 width does not behave like min-width, it applies a fixed width.

  150. 150


    Thanks for pointing out the typo in the “clip” code example. It’s been corrected.

  151. 151

    Thank you for the nice article.

  152. 152

    Another IE7-bug is that if you :hover anything else then <a>-elements in massively slows down the website.

  153. 153

    Why do some companies keep IE6? There are sofware packages that are not supported on new browsers. Take for instance Oracle 11i ERP system. Until a couple years ago, Oracle would not support IE7. We tried running it and for the most part it ran but there were certain functions that would not run correctly. Lucky for us Oracle supports it now. I’m sure there are currently other software packages that still do not support past IE6. Now, when can we go to IE8?

  154. 154

    As you can see from the number of comments, this is a really good article and very very useful. Lets just hope MS bring the rendering engine inline with FF, Chrome and Safari sooner rather than later… Atleast it is closer than it once was.

    Nice one SM

  155. 155

    That was great man. Really good. Thanks!

  156. 156

    Great article, and yet another bunch of reasons to completely abandon IE6.

    My advice to web designers: make sure your contract states that you will charge extra for IE6 compatibility of your work.

  157. 157

    Not to plug a product, but if you have $149.00, pick up Microsoft Expression Web which comes with SuperPreview. It allows you to see side by side inconsistencies and box models in IE 6, 7, 8, and any other browsers. I go with Firefox and Opera. This program has literally saved me 10s of hours in cross browser compatibility. Nice article!

  158. 158

    Which DOCTYPE was used for testing? IE7 fails some of these tests when no DOCTYPE is present or when it is intentionally put into quirks mode. For example, it suffers from the same chained classes bug that IE6 does when left in quirks mode.

  159. 159

    EVERY item in the article denotes a forward progression of the browser, not a flaw or a fault or broken compatability.

    The ONLY time any of these items becomes an issue is if you write your code from the front to the back (start coding against the newest browser and then progress to the oldest). Show me a coder who needs to ensure compatability and codes (front to back) that way and I guarantee that they are currently unemployed (or at least not employed as a coder). Its dumb, stupid, idiotic, lazy, {pick a few of your own choice words too} coding that causes these problems and nothing short of it.

  160. 160

    u ppl say big companies still use ie6 and they dun want pay for upgrade. But ie7 is free dammit (same as ie8 but it got higher requirements ).

  161. 161

    lol, not a SINGLE “Yes” on IE6! GIVE IT UP FOR DA MAAAAAAAN!!! B3

    Great article by the way. :’3

  162. 162

    @Gads: Exactly correct.

    @Lobo: First, Lrn2English. Second, some companies use older browsers because mission critical software — which is really their core business — is not compatible with anything else. That’s life, it sucks, get a helmet.

  163. 163

    @Gads, can you elaborate ? Are you saying that designing for IE6 first will make it compatible to Chrome or FF directly ?

  164. 164

    Regarding the comments made about IE7 being free, and so it should be easy to upgrade:

    Just because software is “free” money-wise doesn’t mean it’s “free” time-wise. Companies that have to upgrade hundreds, or even thousands of computers face man-power issues, not necessarily financial issues.

    Also, many companies today are still using web and intranet applications that were built specifically for IE6. Remember that at one time, IE5/6 held something like a 95% market share.

    Also, it should not be surprising that the list contains “no” for IE6 in every instance. Since the article was specifically dealing with “differences” then obviously there would not be a “yes, yes, yes” item listed. As was mentioned at the beginning of the article, this list does not include items that lack support in all 3, or are completely supported by all 3.

    As a side point, I originally had included a “yes” for IE6 for its support of the “star html” hack, but since that wasn’t really a legitimate CSS property, value, or selector, then I deleted it.

  165. 165

    :last-child pseudo selector doesnt seem to work in IE 7 also.


    What psycho builds FOR ie6 and then scales upwards? I personally build for the latest browsers then I work into my css graceful degradation towards the older browsers. If you design for ie6 you must have 90’s designs or something. Very strange.

    This being said I tend to do my html and CSS with IE6 at least in mind, even though I don’t go out of my way to make it perfect in IE6 anymore. I tend to have almost no issues with the browser.

  166. 166

    yo smashing mag.
    you really think that ie6 7 8 differences are just that easy.
    if ie7 supports any css element, it just show it correctly .
    can’t wait for your book and see that gazillion mistakes :)

  167. 167

    Wow thanks for this, i was just thinking of compiling something like this myself the other day :) Cheers

  168. 168

    why isnt there a similar chart with firefox? Much as I love FF its as full as bugs as IE ever was -maybe more so. All this fanboi whining ‘death to ie6′ … you sound like the ‘Death to America’ rants we hear!

    IE6 is flawed, so is IE7, 8 comes close but ignorantly and willfully ignores some standards. The answer?

    Get Over It.

    Grab articles like these that document all the bugs as much as possible, code simply, use a basic template, and avoid ‘features’ and most non-essential css as much as possible :(

    even when all browsers ‘support’ something, they do it differently! *@#@

    anybody can tell me why a dotted border looks like DOTS (round) in FireFox, like diamonds in IE, like SQUARES in another?
    the nightmare continues…..

  169. 169

    informative.. thanks

  170. 170

    @jack parsons: I actually run my own studio and one of my peer’s is working on Scotiabank’s relaunch due out in the new year, and surprise! it won’t be supporting IE6. If banks are willing to make the change, it’s a sign. How is Quark Express treating you, as I assume that is what you are using for editorial work.

  171. 171

    It’s a very great and strong article!

  172. 172

    a very long yet very useful article. kudos!

  173. 173

    Also a great way to target specific IE-versions (and even different browsers) is the CSS Browser Selector script from Rafael Lima: http://rafael.adm.br/css_browser_selector/. I`d love to write a tutorial for Smashing once as it’s one of the most useful scripts I ever used.

    Using it you can use the selector “.ff” for example to specifically target Firefox or “.ie” for all IE-Versions. It`s not only a great way to quick check browser differences (before using Conditional Comments) but also to target browsers which would else be indistinguishable.

  174. 174

    Great reference !

  175. 175

    Support-IE6-No almost everywhere

    Conclusion : everyone should (MUST!!!!) use IE6 forever :-))

  176. 176

    I really believe people should update their browsers. It’s not about being lazy or ignorant, it’s about investing whatever time you virtually waste creating specific sheets to support an older version of a browser, to developing new functionalities and evolving.

    It’s about progress.

  177. 177

    Great reference !

    IE6 must disapear in world

  178. 178

    debugging for IE6 is frustrating and it’s almost a limit for designers.

    @Sonam S. Diwate
    use AlphaImageLoad filter to force IE6 to see transparency on PNG images, remember to declare background: none after the filter

  179. 179

    Nice article, very useful! Bookmarked.

    But how f**king hard can it be for MS to force people to update their IE6, it’s insecure and a pain in the ass for us developers. I’m lucky if I’m able to evade creating at least two extra css-files on clients sites.

  180. 180

    IE6 is there still one… it didn’t die yet!?

    Thanks for the summary!

  181. 181

    I’m really not an IE fan at all, but this made for interesting reading. As a dabbler in website coding and design, I’ve always found IE to be the most frustrating of all browsers (I use Firefox so generally lean towards perfecting a ‘look’ there).

  182. 182

    For those people decrying that IE6 must suck because all the items in this list show that IE6 does not support them, need to realize that the list is only showing INCONSISTENCIES between the different versions. That means that if the support is the same across all three versions (either YES or NO) it won’t show up here. Since Microsoft has improved the standards compliance in each iteration of their browser, it is unlikely that IE6 would support something that either IE7 or IE8 wouldn’t.

  183. 183

    just when will the users stop using IE6??

  184. 184

    Regarding what is said in the article, I found this trick to work on IE”:hover on Non-Anchor Elements”:
    * html #links li a { /* make hover effect work in IE */
    width: 400px;

    Cite: “And now the CSS. In order for the block hover effect to work properly in IE, we need to make the width of the link the same as that of the list item.”


  185. 185

    I’m sorry, but I don’t find this article of any use. All the noted CSS topics are really niche CSS rules that I learned to completely avoid to get cross-browser compatibility. It’s like saying the # -moz-border-radius-topright / -webkit-border-top-right-radius would only work in FF 3/Opera/Safari 4/Chrome2.

    Seriously, how often do you normally use a Transparent Border, Clipping Regions, Child Selectors, Page-Break-Inside Boxes and Adjacent selectors in your project? There are much simpler ways to achieve any of those using basic CSS.

  186. 186

    Great information here and definitely useful!

    Thanks again!

  187. 187

    @Louis (October 15th, 2009, 2:01 pm)
    Larger companies’ IT departments typically download the updates and any new install.exe to the main servers, then push those files to their relevant networked machines (saving company bandwidth and time.)
    Smaller companies can do so too, even SOHO based networks can be configured to do same. There is no valid excuse to keep clinging onto IE6. Compare these pages:

    Not even MS themselves can support IE8 to it’s fullest, and IE6 to it’s fullest, off the same code-base – just one of the many reasons for the dual rendering engines in IE8.

    We have enabled this IE6-notification on our sites:

  188. 188

    IE6 supports nothing-what a surprise! Nice article, really helpful information!

  189. 189

    IE in general is crap ;) But it’s a nice one here. Thank you for this article…

  190. 190

    @Lezus: Banks have a specific reason to discontinue support of older browsers and it has nothing to do with design.

  191. 191

    Seriously…this article could have been titled “IE6 barely supports CSS” and had the same effect.

    I realize that we can’t expect old software to display things that were created/finely-tuned after its creation correctly, but the main point this article points out, is that there are 3 VERSIONS OF THE SAME PROGRAM being widely used. Sure, for people who know what they’re doing, upgrading is easy. But most people probably don’t know what version they are using, let alone what a web browser even is. They’re just using “the internet”.

    Internet Explorer updates should be part of the mandatory Windows updates with all the bug fixes and patches, then we wouldn’t have this problem.

  192. 192

    “Alternative Values for the Display Property” You can set inline-block in ie6 and 7 if you use zoom:1; with it.

  193. 193

    How terrible IE6 is T_T

  194. 194

    Ban IE6! :) by the way great article!

  195. 195

    Carl - Web Courses Bangkok

    October 17, 2009 12:37 am

    So basically anything that is of use IE6 can`t do.

  196. 196

    It wanted to make this article known to Japan, and the following articles were written.
    もうIEで泣きたくない!IE6,7,8 でのCSS対応度の違いをまとめてみた

  197. 197

    @John Faulds = the script you mention is good, but not perfect. For instance, repeating background images on floated containers do not work in when this script is enabled. Also, it can really slow down larger sites. I do however like the *-trans.png alpha transparency support.

  198. 198

    Floris Fiedeldij Dop

    October 17, 2009 10:32 am

    Conclusion of this article: ripIE6.com

  199. 199

    Sorry my bad english.
    I think all this is waste of time. I want all visitors can view my site: So I use oldschool HTML code. Works well in any device. I miss HEIGHT=”100%”.
    Professionals must don´t care for browsers.
    Anyway, 99% of visitors uses IE.
    Other thing: Flash and Tableless sites sucks too.

  200. 200

    Is there anything that works in IE6?

  201. 201

    really helpful for developers.

  202. 202

    Wouldn’t it be nice if there was only one browser. Just not IE.

  203. 203

    thx,i hate IE6.0

  204. 204

    Interesting article, opened my eyes to some existing CSS rules that I was unaware of! Many thanks.

  205. 205

    IE6 is real pain..
    Supports nothing but anyone uses it :(

  206. 206

    Very nice article!!! Its really helpful for developers

    Any way Thank You!!

  207. 207

    One thing I recognized is that if you need to unset a clip you would set it to ‘auto’. This does not work in any IE.

    Unset it using clip: rect(auto);

    btw. a:hover span does work in IE6

  208. 208

    So… basically IE says no to everything.

  209. 209

    @jack parsons: You have no supporting facts to your statement.

    What you are suggesting is that we as designers must not use the resources supplied to us until the backwards users decide to hop on board. It is our job to develop the digital world and to expose people to things they may not be familiar with.

    Do you really think mankind made it this far by just dwelling on the creation of the wheel? I didn’t think so.

  210. 210

    Regarding those stuck with IE6 in corporate environments: COMPLAIN! The increasing numbers of sites that will no longer work correctly in IE6 is your cue to launch the complaint machine on intransigent corporate IT departments. Let them know that you are not happy. Rinse. Repeat.
    It won’t happen faster until you complain loudly and make the change happen.

  211. 211

    Good article. Thanks for doing the leg work in comparing versions of IE.

    It would be nice to have only one “standard” to work towards for folks browsing the internet, but alas, that is not the reality. So we as developers just have to understand the differences and deal with it.

    Although I am generally a strong advocate for using the lastest version of a given software, there are some users that have no control over the version of the browser that they are using, and sometimes for good reason.


  212. 212

    Very helpful article for Developer as well as UI Guys. Thanks for nice article.
    so can i get same for CSS 1, CSS2 or CSS 3

    Thank you very much :)

  213. 213

    Os desenvolvedores deveriam parar de se preocupar tanto com o IE6. Estou barrando, simplesmente (via script)

  214. 214

    Hi guys

    Every body know this IE6 is totally wast, But why the use ? i am relay fad up with IE6
    good article “Keep up the good work “

  215. 215

    Good article.

  216. 216

    Christian Castelli

    October 22, 2009 12:59 am

    Generally it’s seems to me to recognize a pattern: IE6 it’s obsoleted, deprecated and should be defunct. Maybe (in a perfect world) when possibile companies should advice to their customers and users to upgrade their browser.
    Supporting this browser is time and energy consuming.

  217. 217

    Nice blog.

    but fixes for the bugs will be much helpful.
    I developed a website for one of my client, it goes perfect with opera, mozilla,chrome, safari…. but IE is heck whether its 6 or 7.. both of them sucks.

    In IE6 my margin and padding are behaving like double valued, than it is original value.
    Can any one give me a clue? why this is happening?

  218. 218
  219. 219
  220. 220

    Nice article. I’ve been dealing with some of these issues..

  221. 221

    Thank you for comprehensive, excellent article. I design education and health website for low income audiences. I really want site visitors to be empowered by the info on these websites — including poor people using old machines with IE6, dial-up or who don’t have legal copies of Windows. As a web designer my job is to communicate to everyone my client is trying to reach. Thanks, Louis, for making this easier.

  222. 222

    It still amazes me that so many people continue to use the “virus factory” better known as internet explorer. When I am designing sites from scratch I constantly find myself having to use little tweaks and hacks just to get things to look right. They always seem to work fine in Firefox. ::sigh:: 60% of my statcounter visitors are using some version of IE. Hand Poured Candles

  223. 223

    Short Version:
    IE6 sucks
    IE7 sucks less
    IE8 sucks, but you haven’t figured out how yet.

  224. 224

    Microsoft still supports Windows 2000 through July 2010. That means no IE 7+, no .NET 3.5, and no Chrome. There are apparently a lot of organizations out there still using Win2k because it doesn’t require very powerful hardware to run, and why MS has extended support on it.

    For what it’s worth, NS 4.7x *could* handle CSS layouts. They weren’t great looking because of all of the rendering irregularities, but it could still do it. Making IE6 work requires a lot less effort than NS 4.7x ever did. Also, I walked to school up hill both ways in the snow.

  225. 225

    pretty good article. Finally, Internet Explorer is working w3c compliance

  226. 226

    Why do we still have to support IE6? Although many techies don’t use it, the stats show that it is still used by about a quarter of the planet. See http://princeofgonville.blogspot.com/2009/10/which-browser-is-most-popular.html

  227. 227

    very useful article! excellent job. I hope somebody hacks all ie6’s. please.

  228. 228

    Its wonderful to see this comparison in such a simple layout.

  229. 229

    I hate IE6 !!! it will not let us use this to optimize the CSS :(

  230. 230

    The curse with IE never end, because now we have problems with ie 6, after with ie7 and after IE8…… the solution for this problem is the IE update to a new version automatically like firefox

  231. 231

    thanks man very useful article.

  232. 232

    last-child dont work even in 8

  233. 233

    Actually, IE6 is awesome… if you compare it to the inconsistencies is its predecessors. If you think IE6 is crap, you should have tried developing in the late 90s.

    This IE6 is crap argument really annoys me. Yes, it’s not as good as the newer browsers, but that’s no reason to not even bother with it. What is most important about your website? You or your users? It should be the users – and if they happen to be stuck with IE6, are you just going to slap them around the face and tell them to go away? Is that good service?

  234. 234

    For those who are asking when IE6 would “die” – well Microsoft announced that it will support IE6 until 2014 !!! I don’t like IE, but unfortunately have to develop for those (stupid or ignorant ?) surfers using IE …

    nadim, mauritius

  235. 235

    Sanjay Kumar Mishra

    November 26, 2009 12:20 pm

    We have two address text box on a ASP.NET control.Size of both text box is 35.We show both text box data in next page as confirmation .Now if user gives max lenght for each text box, there is line break space comes between text box data in Internet explorer 6, but it is wokring fine in IE8.any idea ,please help.

    In confirmation page text box data is appear like below(IE6)


    but in case of IE8 , it appears like

    which is correct.

  236. 236

    Good reference. Thanks for the post.

    As Ravikumar V, Gustavo Macedo mentioned IE6 is not bad, just is too older.

  237. 237

    Clinton, you are certainly right. In 90’s IE6 was our favorite browser. It was much better and reliable than Netscape. But we all grow… And I don’t see anyone visiting my site with IE6 anymore.

  238. 238

    I will admit, Louis. When I saw all the IE6 = NOs, I thought you were full of it. But you proved me wrong only because I took the time to read all the comments including the one where you link to your benchmark.

    So… pragmatics here. I work in professional web development and so do you.

    Why don’t you just link to your JavaScript tests after each entry above? And go with “partial” as a descriptor a bit like the entry at http://blog.orite.com.au/web_development/2009-04-09/css-implementation-chart-ie6-ie7-ie8/ even if that is not what you’d originally had in mind.

    Both things would help the overall credibility and truly definitive nature of your results (which is what you said at the outset: you want this to be THE guide people use), because like others here, I was initially very skeptical because (among other things) I swore I’ve seen IE6 support a:hover span.

    I’ve not had a chance to test, but in retrospect, it is probably because I use Dean Edwards’ compatibility scripts–see http://dean.edwards.name/weblog/2008/01/ie7-2/.

    However, here’s the clincher: Your test case that you linked in the post above put a complete end to my skepticism. If you discretely linked to your benchmarks, opening them in a new tab, you’d (a) either silence the skeptics or (b) find that you had overlooked something important. And neither of those are bad things! :)

  239. 239

    Ie6 = big trouble for all designers and developers…

  240. 240

    What’s all the fuss about IE 6 , IE 6. Why don’t we all leave the poor fellow alone. It’s not that it never served it’s masters. It totally did. Now that the poor guy is old you all selfish people wanna kiss him goodbye? Just kidding.

    As far as the constantly evolving web development is concerned, IE 6 needs to go away if we wanna give a warm welcome to HTML 5 & CSS 3. if that doesn’t work for you, why don’t we all do what andy budd from ‘clearleft’ does. Server different templates to different browsers based on it’s capabilities to handle them. This approach sounds fair enough to me. This way you won’t have to compromise your skills & you will never disappoint you client either.

  241. 241

    Must read article for web developer!

  242. 242

    mha… developers that don’t want to create ie6 different css is not becouse they are bored about it, but becouse they don’t know how to do that.
    Lot of people still using IE6, big company as well.
    I build clear code for everything yet, not building all the project and then at the end fixing on IE, but together… while you code, test on everything and you will see that is very easy.
    some fast trick btw:

    try always to “play” with:
    positions: static and relative; (to avoid position or visibility problems)
    zoom: 0 or 1; (for some render problems with position relative)
    display: inline; (more on floats)

    You have to develop for it until 2014, so… try to make easy your job building step by step on everything without waiting the end… sometimes never work while fixing becouse problems are on header and you see the crap in the footer….

  243. 243

    Yeah, okay. It’s crap, though.

  244. 244

    it’s crap, this is 2010 not the late 90’s

  245. 245

    Ryan bollenbach

    April 28, 2010 7:24 am

    Ah my god! such an amazing resource.

    I totally made this into a PDF and saved it into my dev files, thank you so much.

  246. 246

    It would have been easier, to write a short article listing the features not supported by IE6 & 7. Not very impressing.

  247. 247

    Well, IE6 is not such a big problem :
    ask for more money if IE6 support is mandatory
    use JS libs that’ll do the work

    Moreover, you are prompt to face these issues when you try to put up something graphically “complicated” like a commercial or game oriented website. In that case, most of your visitors should’ve installed modern browsers. If you’re designing something for a business to business purpose, clients ask something functionnal and clear with no need for features like shadows or transparency.

    graphical : CSS3 (+ JS libs)
    corporate: simple design

    ps.: RIPIE6 deserves a Tshirt^^

  248. 248

    Prateek Kapoor

    May 13, 2010 5:11 am

    Old is really gold dear its still the best……….

  249. 249

    Unfortunately 24% is probably more likely. For sites about web development or IT its 12% since the audience already knows that mozilla, webkit is kicking tridents tail.

  250. 250

    Hi anyone

    Could you help me? I have problem with IE8. when I use element style sheet to define font in Combo Box , it doesn’t change in the list , only change the front text.

    Help me

    Thank in advance

  251. 251

    Please don’t get me started about IE 6. And its not even 6 its the ridiculous inconsistencies between all IE browsers.

    I can deal with one browser being impotent in a lack of a good javascript engine and i can deal with one having silly memory leaks and css chops but when i have to deal with fixing thing in IE6, then IE7 and then yet again IE8 because nothing is consistant then i say it’s time to move on.

    IE6 is a 8+ year old browser and we can look back and say yeah it was good at the time. But im not going to wash myself in the local lake because it was good at the time in the year 1800’s… move on. Technology is always growing grow with it or be stuck in the closed minded old developer styles. It really Psses me off when people say things like that, expecially when some developers are NOT willing to learn new methods because there old code works. It may work, but is it good code, efficient and flexible….prob not and its killing the guy who has to redo your code when you move on.

    GROW WITH TECH…stop being so damn lazy and closed minded.

    IE6 is not awesome at all……Would you say doing your accounting on an apple 1 is awesome, no. Would you say wearing leaves and sh$*ing in holes is awesome i really dont think so…so again don’t appraise the old days when were all on to bigger and better things.

    I just made a CMS and I am not supporting IE6 at all, why…..because people with half a brain can enjoy the smoothness, speed and great usability i can provide when i dont have to support IE6. …. Of course you can make websites supporting IE6. But just dont use it to manage the site.

    Great blog post btw

  252. 252

    IE Tester is not very good at all. If you want to test for multiple IE environments take a look at Tredosoft Multi IE…. bear in mind it wont work on Windows 7.

    I personally use VMWare for virtual machines for each version of IE.

    IE Tester and Treosofts Javascript engine is not anything like the actual IE version installations so keep that in mind when testing.

    #3 was a good tip thanks for that ;)

    Hope this helps someone down the road. VMWare player is free btw, but FUSION is much better, not free but great software.

  253. 253

    does position relative bug can be fixes in both IE6 and IE8,please any one can help

  254. 254

    Lets hope Mike P’s clients don’t have customers/users who want to access their site from a workplace which only uses IE6. Some companies and government agencies will not roll out upgrades if the browser works for their immediate needs (Intranet, etc). Important to keep in mind that it’s not always the end user’s choice which browser they use. Not catering for IE6, no matter how tedious and frustrating it can be, is unprofessional in my opinion.

  255. 255

    Forgive me all, but yes, those users who can’t upgrade their browser even after 9 years (IE 6 was released in Aug 2001), they shouldn’t be slapped in the face – they should be kicked in their asses!!

  256. 256

    As a web developer I find ANY IE browser a pain in the ass. And if you look at the statistics in the beginning of this article that show developers staying away from it like the plague. Writing CSS for compliant browsers is a breeze and I can be done in record time if it weren’t for all the non compliant bugs in IE browsers including IE7 and 8 that double my effort (z-index comes to mind).

    And when it comes to code, none of the public offerings of IE support the modern HTML5 and CSS3 that can revolutionize the web. These specifications have been around for a while and ALL of the other browsers support them but NO, NOT IE.

    And only now that HTML5 has become a hot topic did Microsoft back-peddle into saying they are now going to include support in the new IE9. How many years do we wait now for universal support of these features.

    A final word about IE6. It’s been mentioned that IE6 has been around since 2001 but that’s not the point. Most people simply keep using the browser that was installed on their computer when they bought it. IE7 didn’t come out until 2006. That means that IE6 was pre-installed on any PC sold up to that point. Then there was the recession that prevented people from upgrading their computers so that kept IE6 around for longer than it should.

    Unfortunately Microsoft keeps making a lousy product and people keep using it because it’s whats on their computer when they buy it.

  257. 257

    WOW! now that’s a boat load of comments…didn’t have the courage to read all of them, just half :P. Now, for the record i am a front-end developer (fancy new word for the classic web developer i always feel – personal thought) and i see this article is about an year old but i’ve seen some fresher comments, anyways, people why so much dirt on IE6, before FF became what it is today you really didn’t have many browsers to choose from…back then when few people really knew what was the deal with computers were hackers (the enlightened ones IMHO) we newbs didn’t really care, hell some of us still don’t, that’s why the vast majority of us do what we do, if it was so simple a 10 year old child could do it. I really find it fun to fix bugs in IE (you never knew a well put width fixes a dozen problems in an instant :D ), but not when i’m on a project with a tight deadline. Anyhow a couple day’s ago IE9 came out and i’m on my way to test it. Very good article i have used about 80% of these some worked ok some no depending on the service pack, i admit i used hacks when i ran out of ideas (NOTE: at least i tried not like some jumping straight to the hacks, that’s how you really learn anything i started learning what i know with notepad and IE4 and 5 DOH!). So back to the ones saying IE6 is that and that, think of it this way, some of us grew up with them and got used to the bugs, hell some already know what bugs may appear if they do that and that (myself not really included here cuz i fix the major bugs, my boss decided some time ago that we will no longer offer full compatibility with ie6 because it’s to time consuming so i never really bothered refreshing my memory with things from the past *lucky me*).

    So again very nice article good refresher for some, very enlightening for others, top score from me nothing less expected from this. Pfiu that was a long post :))

  258. 258

    All am saying is IE is not as great as MS think it is. It is not consistent across versions. I can deal with consistent inconsistency, but not those inconsistent inconsistencies in newer versions. By the by, can anyone tell me where I can raise a bug report or change request for IE8 ? ;)

  259. 259

    This is great! But I’ve noticed that there is a difference between IE 8.00.6001.18702 on XP and IE 8.00.7600.16385 on Windows 7. It would be nice to see this updated with the two IE 8s split out.

  260. 260

    I have issue with IE8 and IE7

    In SharePoint 2007 (MOSS) I put script to display left navigation on “View Print preview” screen, it works in IE8 but not working in IE7.

    Here is the script

    @media print{

    If I try in IE8 it works but not in ie7.

    help me

  261. 261

    We just switched from IE7 to IE8, now all our tables do not have boarders, and the tables do not seem to line up correctly on some pages. However, the same code using the same browser (IE8), works fine when deployed to Websphere rather than JBoss. How would the app server make a difference if the JSPs are the same and the HTML source is exactly the same when rendered in the browser?

  262. 262

    This is cool stuff !.It has definitely improved my knowledge.

  263. 263

    Don’t worry about how to write a css that works in all browsers.
    Just change the URL of your website’s CSS a bit and everything works fine.
    I know you don’t believe it, just give it a try. It’s totaly free!!

  264. 264

    Great article. 10x for the info.

    Though I did not test everything from the article, I found that the empty-cells: show; property works in IE7, and not in IE8.
    Also border-spacing: 3px; is not working in any browser.

    Maybe from 2009 to 2012 things changed. Please correct me if I’m wrong, and for you works.

  265. 265

    Alvaro Lourenço

    July 30, 2012 12:38 pm

    Pseudo-elements “:after” and “:before” aren’t working along with “background-image” property in ie8. The browser just ignores the image and nothing really becomes visible. Already read a bunch of solutions on the web: (applying widths/heights), hasLayout triggering, pseudo-element positioning and display modes… and still no success.

    Anybody has a greater approach?

    Thank you.

  266. 266

    Great summary !!
    I always though that all the cool css’s pseudo-class aren’t working in ie7 !! but after reading this article and because IE6 is dead.. time to use them :)

    Thanks !

  267. 267

    Chankey Pathak

    May 31, 2013 2:46 am

    IE sucks a lot :(

  268. 268

    Great article. However I felt like every other word was a heading.

↑ Back to top