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

Example
body>p {
  color: #fff;
}
Description

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

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

Chained Classes

Example
.class1.class2.class3 {
  background: #fff;
}
Description

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

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

Example
a[href] {
  color: #0f0;
}
Description

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

Adjacent Sibling Selectors

Example
h1+p {
  color: #f00;
}
Description

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

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

General Sibling Selectors

Example
h1~p {
  color: #f00;
}
Description

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

Pseudo-Classes and Pseudo-Elements

Descendant Selector After :hover Pseudo-Class

Example
a:hover span {
  color: #0f0;
}
Description

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

Chained Pseudo-Classes

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

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

:hover on Non-Anchor Elements

Example
div:hover {
  color: #f00;
}
Description

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

Support
IE6
No
IE7
Yes
IE8
Yes

:first-child Pseudo-Class

Example
div li:first-child {
  background: blue;
}
Description

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

Support
IE6
No
IE7
Yes
IE8
Yes
Bugs

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

:focus Pseudo-Class

Example
a:focus {
  border: solid 1px red;
}
Description

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

Support
IE6
No
IE7
No
IE8
Yes

:before and :after Pseudo-Elements

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

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

Support
IE6
No
IE7
No
IE8
Yes

Property Support

Virtual Dimensions Determined by Position

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

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

Min-Height & Min-Width

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

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

Max-Height & Max-Width

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

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

Transparent Border Color

Example
#box {
  border: solid 1px transparent;
}
Description

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

Support
IE6
No
IE7
Yes
IE8
Yes

Fixed-Position Elements

Example
#box {
  position: fixed;
}
Description

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

Support
IE6
No
IE7
Yes
IE8
Yes

Fixed-Position Background Relative to Viewport

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

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

Support
IE6
No
IE7
Yes
IE8
Yes
Bugs

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”

Example
#box {
  display: inherit;
}
Description

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

Support
IE6
No
IE7
No
IE8
Yes
Bugs

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

Border Spacing on Table Cells

Example
table td {
  border-spacing: 3px;
}
Description

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

Support
IE6
No
IE7
No
IE8
Yes

Rendering of Empty Cells in Tables

Example
table {
  empty-cells: show;
}
Description

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

Vertical Position of a Table Caption

Example
table {
  caption-side: bottom;
}
Description

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

Support
IE6
No
IE7
No
IE8
Yes

Clipping Regions

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

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

Support
IE6
No
IE7
No
IE8
Yes
Bugs

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

Orphaned and Widowed Text in Printed Pages

Example
p {
  orphans: 4;
}
 
p {
  widows: 4;
}
Description

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

Support
IE6
No
IE7
No
IE8
Yes

Page Breaks Inside Boxes

Example
#box {
  page-break-inside: avoid;
}
Description

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

Support
IE6
No
IE7
No
IE8
Yes

Outline Properties

Example
#box {
  outline: solid 1px red;
}
Description

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

Support
IE6
No
IE7
No
IE8
Yes

Alternative Values for the Display Property

Example
#box {
  display: inline-block;
}
Description

The display property is usually set to block, inline, or none. Alternative values include:

  • inline-block
  • inline-table
  • list-item
  • run-in
  • table
  • table-caption
  • table-cell
  • table-column
  • table-column-group
  • table-footer-group
  • table-header-group
  • table-row
  • table-row-group
Support
IE6
No
IE7
No
IE8
Yes

Handling of Collapsible Whitespace

Example
p {
  white-space: pre-line;
}
 
div {
  white-space: pre-wrap;
}
Description

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

Support
IE6
No
IE7
No
IE8
Yes

Other Miscellaneous Techniques

Media Types for @import

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

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

Support
IE6
No
IE7
No
IE8
Yes
Bugs

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

Incrementing of Counter Values

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

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

Support
IE6
No
IE7
No
IE8
Yes

Quote Characters for Generated Content

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

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

Support
IE6
No
IE7
No
IE8
Yes

Significant Bugs and Incompatibilities

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

IE6 Bugs

  • Doesn’t support styling of the <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

Footnotes

  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

    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

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

    1
  3. 503

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

    0
  4. 754

    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.

    -2
  5. 1005

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

    6
  6. 1256

    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.

    0
  7. 1507

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

    0
  8. 1758

    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 ? ;)

    0
  9. 2009

    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.

    0
  10. 2260

    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{
    .ms-leftareacell,.ms-globallinks,.ms-siteaction,.ms-areaseparatorleft,.ms-rightareacell,.ms-areaseparatorright,
    .ms-areaseparatorcorner,.ms-titlearealeft,.ms-titlearearight,.ms-searchform,.ms-banner,.ms-buttonheightwidth,.ms-buttonheightwidth2{
    display:block;
    visibility:visible;
    }
    }

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

    help me

    0
  11. 2511

    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?

    0
  12. 2762

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

    0
  13. 3013

    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!!
    http://www.atoorina.com

    -7
  14. 3264

    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.

    0
  15. 3515

    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.

    0
  16. 3766

    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 !

    0
  17. 4017

    Chankey Pathak

    May 31, 2013 2:46 am

    IE sucks a lot :(

    0
  18. 4268

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

    0

↑ Back to top