IE8 came out today. Along the way Microsoft fixed a bunch or rendering bugs, which is great, but you might run into problems of you previously used conditional comments such as:

<!--[if IE]>
<link rel="stylesheet" href="patches-ie.css" type="text/css" media="all" />
< ![endif]-->

The trouble is that IE8 will still read that patches-ie.css file and apply some styles that may no longer be needed because the bugs they address have since been fixed. Microsoft recommends that you update your pages to do more precise version detection. That’s probably the best solution, but let’s say that you don’t want to update all of your web applications.

The quick and dirty solution for you is the * hack. IE8 no longer supports the * hack, so you can edit your patches-ie.css file to make it look like this:

*margin-top: 30px; /* for versions prior to IE8 */

Of course you can also reverse this to target IE8:

float: right;  /* all browsers (including IE8) */
*float: none; /* override for IE7 and prior*/

Be sure to use Xenocode to test various version of Internet Explorer side by side and make sure the hack worked.


16 Responses to “(anti) IE8 CSS Hack”  

  1. 1 dangr

    I’d rather suggest to update the conditional comment to:

    Which will only apply the patches-ie.css to Browsers to versins lesser then IE 8! ;)

    I think this “fix” is much faster (and not dirty at all…), than editing your *.css-files with the star-hack…

    Besides… the recent IE8 RC1 is very standards-compliant – I didn’t see many problems on my pages yet.

    If it stays like this and Microsoft might decide to rethink the Outlook 2007 html-rendering, I might even consider stop working on my “LETSSCREWMICROSOFT”-Worm!

    @FBI/CIA/SecretService/etc.: That was a joke!

    Cheers!
    dangr

  2. 2 Rafael Pereira dos Santos (Topera)

    This hack works only in IE8

    background-color: red;

    And this works only in IEs (from IE 5.55 to IE8)

    background-color: red\9;

  3. 3 Rafael Pereira dos Santos (Topera)

    (put slash(\) zero(0) after “red” in the above example!)

  4. 4 Ash Haque

    I think conditional comments would still be valid, just use things like:

    [if IE 7]

    and

    [if lte IE 6]

  5. 5 Tim Golding

    Rafael Pereira dos Santos (Topera)

    your suggestions are useless. The whole point of hacking IE browsers is so that you can target IE browsers only these hacks arn’t IE only they stilll show up on firefox and any other non IE browser

  6. 6 Vince

    Thank you so much for this hack!

  7. 7 Mamoo

    Rafael Pereira dos Santos (Topera)

    thanks alot man

    your hack saved me alot of time

    thanks

  8. 8 Cam

    Having problems getting this to work. Have tried both of these:

    *margin: -72px 0px -280px -110px\9;

    and

    margin: -72px 0px -280px -110px\9;

    Neither are working. Any one?

  9. 9 HN

    Rafael Pereira dos Santos (Topera), thanks a lot for that hack! It saved me a lot of time.

  10. 10 Anjan

    *.css attribute is not working in IE8.Did u try this before posting .i have tried but it’s not working

  11. 11 boris

    Hi Anjan,

    It should be working fine. Do you have an example URL? Give it another shot.

    - Boris

  12. 12 Fábio Rocha

    Rafael Pereira dos Santos (Topera), thanks a lot for that hack! It saved me a lot of time. [2]

  13. 13 Richa

    Great.. thanks a lot..

  14. 14 karan

    cool hacking it work on IE8 with padding-top /*\**/:96px\9;

  15. 15 karan

    padding-top /*\**/:96px\9;

    its correct {padding-top /*\**/:96px;}

  16. 16 CF

    Holy cow… just went through this and here are the tricks for browser elements if you need specific values PER browser, I hope this helps:

    margin-top: -32px; /*firefox*/
    !margin-top: -24px; /*IE7only*/
    _margin-top: -24px; /*IE6only*/
    margin-top: -24px\9; /*IE8only*/

Leave a Reply