IE6 vs IE7 vs IE8 – CSS Property

 

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

.

You might be interested in :

  1. One Page Website Design New to the internet world? Let The SCube help...
  2. Wordpress Post Body Content Not Displaying Having problem loading wordpress page or post content? Deactivation...
  3. Chrome Background Colour / Image not showing? You have designed amazing Website site and tested it...
  4. What font is being used? If you are like us at thescube, you might...
  5. Windows Live Mail (WLM) – minimized to system tray Wondering how to minimize windows live mail to system...

Tags: CSS, IE6, IE7, IE8

7 Responses to “IE6 vs IE7 vs IE8 – CSS Property”

  1. jack parsons Says:July 1st, 2009 at 5:49 PM

    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.

  2. Louis Says:July 30th, 2009 at 5:48 PM

    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.

  3. Sebastian Says:August 5th, 2009 at 5:47 PM

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

  4. Lisa Says:August 29th, 2009 at 5:47 PM

    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?

  5. Markus Says:September 8th, 2009 at 5:46 PM

    Basically, IE6 is crap… nice article though.

  6. JakeSikma Says:September 25th, 2009 at 5:44 PM

    Great resource to cross reference CSS properties

  7. x_atomic Says:November 2nd, 2009 at 5:43 PM

    Great reference for checking your CSS properties across IE

Leave a Reply

Get in touch! get in touch

Shovan Sargunam @ Birmingham
t: 0 78 24 35 85 44
e: info@thescube.com


Animation sent t5_design