IE8 CSS Hack - best method? [duplicate]

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?

Handed

The best method is to not use hacks at all. – Kelwunn

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

There are some things that IE just doesn't render in the same way as other browsers and hacks are fine to be used for that. If you need entire CSS style sheets for each version, then you have a problem with your code. To directly hack a single line within a CSS entity for IE8 and below you can use {property: value\9;} – Humoresque

@My Head Hurts Your CSS will quickly get messed up with those hacks. I don't say you should have a separate sheet for every IE version, I just outlined the possibilities. I normally have one for <IE9 where I put all that filter crap, and one for IE6 if I have to support it. And it's not an entire sheet with everything repeated, as I said in my answer. – Curlew

@bazmegakapa - I have found that if you write your code correctly then the only fixes on IE7/8 (anyone using IE6 in my opinion should be beyond scope) tend to relate to pixels (height, width, padding...) - which can be fixed with a simple CSS hack and does not tend to get messy as it is contained within the same CSS element. I agree with you for adding a new CSS style sheet for IE9 as this accomodates new features - but this question was an issue between IE7 and IE8. -> Also, I was the one who +1'd your comment about serious problems – Humoresque

@My Head Hurts I haven't said adding a sheet for IE9, I add one for <IE9, so older IEs. I would not personally use hacks in my main CSS by any means, but let's leave this for personal preference then :). I was not happy when I inherited a project full of CSS hacks :). – Curlew

Answer 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).

Curlew

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

@Gurevich Thx, I will add it. You can never emphasize it enough :). – Curlew

Answer 2

Use conditional comments.

Glooming

Answer 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
}

Scad

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 :). – Curlew

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. – Cuttler

Answer 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.

Inclination

Answer 5

Use the ie7-js Javascript library, which does some magic to make older IE versions behave more like proper browsers with their handling of HTML and CSS. Then, as others have suggested, write your code in a standards-compliant manner which behaves well with the latest versions of Chrome, Firefox, Opera, etc.

Placeman

Answer 6

I was looking for a good option for IE10 and below CSS styling (but it would work for IE8 only as well), I didn't wanted an extra stylesheet for readability and I came up with this idea:

<!--[if lt IE 10]><div class="column IE10-fix"><![endif]-->
<!--[if !lt IE 10]><!--><div class="column"><!--<![endif]-->

I declare my div or whatever you want with an extra class, this allows me to have extra CSS in the same stylesheet in a very readable manner.

It's W3C valid and not a weird CSS hack.

Amphibolite

Answer 7

ie8 only: the best way is

body{background:#f00\0/;}

\0/ is the Ie8 CSS Hack

Concent

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

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; } } – Concent