CSS Hacks – IE8, IE7, IE6 and Firefox

文章目錄

• Option 1: IE8 and Firefox using the same style, IE6 and IE7 using another
• Option 2: IE8 and Firefox using the same style, IE6 and IE7 using their own styles different to IE8 and Firefox.
• Option 3: Similar to above, but if you need to target IE8 and Firefox separately.
• Option 4: Similar to above, but if you need to target Firefox 3 and Firefox 2 separately.

Option 1: IE8 and Firefox using the same style, IE6 and IE7 using another

#block {   margin-top: 5px; /* target only IE8 + Firefox browsers */    *margin-top: 10px; /* target only IE7 and older browsers */ } 

Option 2: IE8 and Firefox using the same style, IE6 and IE7 using their own styles different to IE8 and Firefox.

#block {   margin-top: 5px; /* target only IE8 + Firefox browsers */ }  * html #block { /* target IE6 only */   margin-top: 50px; }  *+html #block-block-10 { /* target IE7 only */   margin-top: 100px;}  

Option 3: Similar to above, but if you need to target IE8 and Firefox separately.

#block {   margin-top: 5px; /* target only IE8 + Firefox browsers */ }   #block-block-10, x:-moz-any-link { /* target only Firefox, overriding the style above */  margin-top: 20px; }   * html #block { /* target IE6 only */   margin-top: 50px; }   *+html #block-block-10 { /* target IE7 only */   margin-top: 100px; } 

Option 4: Similar to above, but if you need to target Firefox 3 and Firefox 2 separately.

#block {  margin-top: 5px; /* target only IE8 + Firefox browsers */ }   #block-block-10, x:-moz-any-link { /* target only Firefox, overriding the style above */   margin-top: 20px; }   #block-block-10, x:-moz-any-link, x:default { /* targets Firefox 3.0 and newer, overriding the style above */   margin-top: 30px; }   * html #block { /* target IE6 only */   margin-top: 50px; }   *+html #block-block-10 { /* target IE7 only */   margin-top: 100px; } 

Hopefully this makes sense, I have tested it so hopefully it works for you. Feel free to give feedback or other solutions you have come across.