IE6 vs IE7 vs IE8 – CSS Property

Home / Blog / IE6 vs IE7 vs IE8 – CSS Property

Comparison chart of CSS property in IE6 vs IE7 vs IE8

Selectors & Inheritance

Type Example Description IE6 IE7 IE8
Child Selectors body>p {
color: #fff;
}
No Yes Yes
Chained Classes .class1.class2.class3 {
background: #fff;
}
<div class=”class1 class2 class3″>
<p>Content here.</p>
</div>
No Yes Yes
Attribute Selectors a[href] {
color: #0f0;
}
No Yes Yes
Adjacent Sibling Selectors h1+p {
color: #f00;
}
<h1>heading</h1>
<p>Content here.</p>
<p>Content here.</p>
No Yes Yes
General Sibling Selectors h1~p {
color: #f00;
}
No Yes Yes

Pseudo-Classes and Pseudo-Elements

Type Example IE6 IE7 IE8
Descendant Selector After :hover Pseudo-Class a:hover span {
color: #0f0;
}
No Yes Yes
Chained Pseudo-Classes a:first-child:hover {
color: #0f0;
}
No Yes Yes
:hover on Non-Anchor Elements div:hover {
color: #f00;
}
No Yes Yes
:first-child Pseudo-Class div li:first-child {
background: blue;
}
No Yes Yes
:focus Pseudo-Class a:focus {
border: solid 1px red;
}
No No Yes
:before and :after Pseudo-Elements #box:before {
content: “This text is before the box”;
}

#box:after {
content: “This text is after the box”;
}

No No Yes

Property Support

Type Example IE6 IE7 IE8
Virtual Dimensions Determined by Position #box {
position: absolute;
top: 0;
right: 100px;
left: 0;
bottom: 200px;
background: blue;
}
No Yes Yes
Min-Height & Min-Width #box {
min-height: 500px;
min-width: 300px;
}
No Yes Yes
Max-Height & Max-Width #box {
max-height: 500px;
max-width: 300px;
}
No Yes Yes
Transparent Border Color #box {
border: solid 1px transparent;
}
No Yes Yes
Fixed-Position Elements #box {
position: fixed;
}
No Yes Yes
Fixed-Position Background Relative to Viewport #box {
background-image: url(images/bg.jpg);
background-position: 0 0;
background-attachment: fixed;
}
No Yes Yes
Property Value “inherit” #box {
display: inherit;
}
No No Yes
Border Spacing on Table Cells table td {
border-spacing: 3px;
}
No No Yes
Rendering of Empty Cells in Tables table {
empty-cells: show;
}
No No Yes
Vertical Position of a Table Caption table {
caption-side: bottom;
}
No No Yes
Clipping Regions #box {
clip: rect(20px, 300px, 200px, 100px)
}
No No Yes
Orphaned and Widowed Text in Printed Pages p {
orphans: 4;
}

p {
widows: 4;
}

No No Yes
Page Breaks Inside Boxes #box {
page-break-inside: avoid;
}
No No Yes
Outline Properties #box {
outline: solid 1px red;
}
No No Yes
Alternative Values for the Display Property #box {
display: inline-block;
}
No No Yes
Handling of Collapsible Whitespace p {
white-space: pre-line;
}

div {
white-space: pre-wrap;
}

No No Yes

Other Miscellaneous Techniques

Type Example IE6 IE7 IE8
Media Types for @import @import url(“styles.css”) screen; No No Yes
Incrementing of Counter Values h2 {
counter-increment: headers;
}

h2:before {
content: counter(headers) “. “;
}

No No Yes
Quote Characters for Generated Content q {
quotes: “‘” “‘”;
}

q:before {
content: open-quote;
}

q:after {
content: close-quote;
}

No No Yes

.

Don’t forget to join our FaceBook Fan page to get latest updates on CSS and IE

Recommended Posts
Loading Facebook Comments ...
Showing 14 comments
  • jack parsons
    Reply

    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.

  • Louis
    Reply

    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.

  • Sebastian
    Reply

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

  • Lisa
    Reply

    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?

  • Markus
    Reply

    Basically, IE6 is crap… nice article though.

  • JakeSikma
    Reply

    Great resource to cross reference CSS properties

  • x_atomic
    Reply

    Great reference for checking your CSS properties across IE

  • data entry from home
    Reply

    Hello from Swansea! I found that remarkably worthwhile. Thanks for the information. I will be back to search for more information very soon.

  • Beatris Belliston
    Reply

    Very Interesting. I haven’t had the same view here in Anchorage, but I guess that isn’t too too hard to imagine.

  • Barton Sardin
    Reply

    Ha!Hey!Hah!. That’s funny. That’s the fifth time I’ve come acrosssomething similar. interesting.

  • online freelance jobs
    Reply

    I didn’t quite get the point this to begin with. But when I went through it a fourth time, it all became clear. Thanks for the thought. Certainly something to spend some time on.

  • motorcycle accessories
    Reply

    Yes, I was very keen on that. So was my friend. He said he will check it out tomorrow. We will be back before you know it.

  • Tiesha Lougee
    Reply

    Thanks for creating this great informational resource.

  • Rocky Strait
    Reply

    Wonderful read. I identified your site from a google search, and was glad i did. The data has helped me immensely.

Leave a Comment

Contact Us

We're not around right now. But you can send us an email and we'll get back to you, asap.