IE8 CSS Hack - best method?

Question

Can anyone recommend the best way to hack IE8 styling via CSS, I've recently been making IE8 render as IE7 for ease - but wondered if it was best to add IE8 hacks?

Solution 1

You should reverse your method. First your site should look good in modern browsers (like Firefox, Chrome, Opera, IE 9), and then you can start worrying about the others.

As others suggested, conditional comments can be your friend.

First, you should develop your CSS to look fine in the modern browsers. Then check IE8, see what problems you get. If you need to, include an IE-specific stylesheet. After that, you can check in IE7 and then IE6 if you support it, and add further fixes.

An example:

<link rel="stylesheet" href="normal.css" type="text/css" />
<!--[if lt IE 9]><link rel="stylesheet" type="text/css" href="ie8.css"><![endif]-->
<!--[if lt IE 8]><link rel="stylesheet" type="text/css" href="ie7.css"><![endif]-->

In this case you include normal.css which is for modern browsers. You found some strange IE8 issues, so in ie8.css you fix the problems. You don't have to include all your selectors in this, only the ones that need a fix (the values will be overridden for IE 8 and lower). After that, if there are still some strange things in IE7, you can add your ie7.css and fix those, and so on.

Please refer to the links the others gave you to get more information on the usage of conditional comments.

Finally: making IE8 render as IE7 for ease is never a good idea, and should be avoided. IE7 is the far past (in the IT world, IE8 should be the far past either...), develop for the present and the future, and after that you can care about the people who are still stuck with old technology (based on your audience and business plan).

Solution 2

Use conditional comments.

Solution 3

As other answers posted,you could use Conditional Comments,but that would add one HTTP request when user is using IE8. You can use the \0 hack in the css file

img{
width:200px;//other broswers
width:100px\0;//only IE8
}

Solution 4

Can you explain a bit more what you want?

Generally, IE8 is quite standards compatible, so just make sure your HTML document is in standards mode and give IE8 the same stylesheet as any other browser.

If IE is acting up, then the best solution is to use Conditional Comments to give IE a separate stylesheet.

View more solutions

Comments

[BoltClock]

The best method is to not use hacks at all.

[kapa]

If your site looks much better in IE7 than IE8, you have serious problems.

[thirtydot]

+1, good advice. I might have also mentioned that making IE8 render as IE7 for ease is a bad idea.

[kapa]

@thirtydot Thx, I will add it. You can never emphasize it enough :).

[kapa]

I'd personally advise against using any kind of hacks. Conditional comments is such a clean way for solving IE problems. And on most sites one more request for an IE CSS is not what you should worry about when you start optimizing :).

[mbokil]

Works good. I'm on a Oracle content management system someone else controls and I can't add a conditional statement so this hack will have to suffice.

[reyhappen]

Really? But I did not see that. Are you sure it's IE9?

[reyhappen]

maybe another way------------code /* IE6 IE7 */ @media all\9 { body { background: green; } } /* IE8 */ @media \0screen { body { color: blue; } } /*IE9 IE10 */ @media screen and (min-width:0\0) { body { background: yellow; } } /* IE10 IE11 */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .selector { property: value; } }