In blog

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

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

Not readable? Change text.