CSS difference Between IE6,IE7,IE8
As a designer we experience the most bizzare conditions with internet explerer because it doesn’t follow w3 standereds mostly while rendering elemets and Box Model where moslty other Gecko browsers follow same.Even i am very good at programming ,i experience difficult to find IE issues,wasted more time on CSS issues than programming.So i came up with reference for IE and instructions how to handle them to keep in mind reference for me (us).Even there is difference between IE versions also.So below is the reference
| Selector Type | Examples & description | IE6 | IE7 | IE8 |
| Child Selectors: |
body>p,ul>li |
No | Yes | Yes |
| Chained Classes |
.class1 .class2 .class3, or like class=" class1 class2 class3" |
No | Yes | Yes |
| Attribute Selectors |
a[href=xyx],input[type=radio] |
No | Yes | Yes |
| Adjacent Sibling Selectors |
h1+p,li+ul,ul+li |
No | Yes | Yes |
| General Sibling Selectors |
h1~p,li~ul,ul~li |
No | Yes | Yes |
| Pseudo-Classes and Pseudo-Elements |
a:hover span ,li:first p |
No | Yes | Yes |
| Chained Pseudo-Classes |
a:first-child:hover , a:active:hover |
No | Yes | Yes |
| :hover on Non-Anchor Elements |
p:hover |
No | Yes | Yes |
| :first-child Pseudo-Class |
div li:first-child |
No | Yes | Yes |
| :focus Pseudo-Class |
a:focus |
No | Yes | Yes |
| :before and :after Pseudo-Elements |
.class:before,.class:after |
No | Yes | Yes |
| Min-Height & Min-Width |
#box { max-height: 500px; min-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 |
| inherit |
#box { display: inherit; } |
No | No | Yes |
| Border Spacing on Table Cells |
table td { border-spacing: 3px; } |
No | No | Yes |
| Vertical Position of a Table Caption |
table { caption-side: bottom; } |
No | No | Yes |
| Clipping Regions |
#box { rect(20px, 300px, 200px, 100px) } |
No | No | Yes |
| Alternative Values for the Display Property | display property values other than block,none,inline,inline-block. | No | No | Yes |
| Handling of Collapsible Whitespace |
p { white-space: pre-line; }
div { white-space: pre-wrap; } |
No | No | Yes |
| @import |
@import url("styles.css";) screen; |
No | No | Yes |
| Quote Characters for Generated Content |
q {quotes: "'" "'"; }
q:before {content: open-quote;}
q:after {content: close-quote; } |
No | No | Yes |
| !important |
ul {margin-left:0 !important} |
No | Yes | Yes |
Handling Issues
In the most cases IE6 doesn’t support all selector types to other IE7,IE8.
Even though IE7,IE8 both support much same selectors,they have difference in box model and rendering elements.
In the case of IE7 it just need to add special IE7 css fix style like below
<!--[if IE]> <link href="ie_only.css" rel="stylesheet" type="text/css"> <![endif]--> <!--[if lt IE 7]> <link href="ie_6_and_below.css" rel="stylesheet" type="text/css"> <![endif]--> <!--[if !lt IE 7]><![IGNORE[--><![IGNORE[]]> <link href="recent.css" rel="stylesheet" type="text/css"> <!--<![endif]--> <!--[if !IE]>--> <link href="not_ie.css" rel="stylesheet" type="text/css"> <!--<![endif]-->
in the case IE6,we can’t handle totally with seperate CSS file fix like above example,it needs some layout tweaks also.
We can show elements with conditions as below specified.
<![if!IE]> This shows up in anything but IE <![endif]>
It is better to avoid special characters in selecter name like "_","-",even they support mostly browsers.
Hadling CSS fixes with special selectors
Only IE6 and below
* html {}
IE7 and below
*:first-child+html {} * html {}
IE7 only
*:first-child+html {}
IE7 and Modern Browsers only
html>body {}
Recent Opera versions 9 and below
html:first-child {}
