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