CSS Hacks – IE8, IE7, IE6 and Firefox

• Tweet

With more users starting to use IE8, the other day I found myself needing to update a certain style that was not displaying correctly in the IE8 browser. It was displaying correctly in Firefox 3 and earlier versions, as well as IE6 and IE7. So I needed to find a way to also target IE8. After searching the internet, and coming across only a couple of options for IE8 (which I couldn’t get to work), I decided to use different hacks together to achieve the outcome I needed. It’s a little bit of work for just a small thing, but I have no doubt better solutions will present themselves.

Below I have added some different options, depending on what browser you need to target.

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.

• Tweet