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 { |
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 { |
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 { |
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 { |
No | No | Yes |
| Quote Characters for Generated Content | q { quotes: “‘” “‘”; } q:before { q:after { |
No | No | Yes |
Don’t forget to join our FaceBook Fan page to get latest updates on CSS and IE
Comments
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.
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.
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
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?
Basically, IE6 is crap… nice article though.
Great resource to cross reference CSS properties
Great reference for checking your CSS properties across IE
Hello from Swansea! I found that remarkably worthwhile. Thanks for the information. I will be back to search for more information very soon.
Very Interesting. I haven’t had the same view here in Anchorage, but I guess that isn’t too too hard to imagine.
Ha!Hey!Hah!. That’s funny. That’s the fifth time I’ve come acrosssomething similar. interesting.
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.
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.
Thanks for creating this great informational resource.
Wonderful read. I identified your site from a google search, and was glad i did. The data has helped me immensely.
Subscribe to our Newsletter
Recent Albums
Random Blog
Tutorial
Case Study
Comments
Like us
Subscribe to our Newsletter
Leicester
Birmingham
Logo Design
Company
Keywords
Social Media
Copyright
Copyright © 2010 The SCube
All the respective rights reserved