10

I know it shouldn't be done, but I just want a quick fix for now and that will give me time to find a proper fix for this.

How can I target IE8 alone using CSS because I've tried appending \9 such as:

margin:100px\9;

However, it also affects IE9 and I don't want that because on IE9 the whole site looks fine.

TylerH
  • 20,799
  • 66
  • 75
  • 101
Tsundoku
  • 9,104
  • 29
  • 93
  • 127
  • 1
    Your wording is a little confusing. What precisely are you trying to do? Simply provide CSS to only IE8? – thirtydot May 02 '11 at 01:22
  • yes basically that, I updated my answer to try and phrase it better though :) – Tsundoku May 02 '11 at 01:27
  • 2
    You should use the time to find a proper fix instead of waiting for an answer here. – BoltClock May 02 '11 at 01:35
  • 7
    @BoltClock, what the hell kind of attitude is that for a legitimate programming question on a programming Q&A site? You should use the time to find a little respect for others instead of discouraging people from using SO as it was intended to be used. – eyelidlessness May 02 '11 at 01:39
  • 3
    @eyelidlessness: I think you misunderstood *the spirit* of that comment somewhat. The OP said "I just want a quick fix for now and that will give me time to find a proper fix". A hacky "quick fix" involving providing only IE8 with a separate rule is not as good as spending the time properly figuring out the actual underlying problem. – thirtydot May 02 '11 at 02:06
  • @thirtydot, the spirit of that comment is effectively moot, as people with a "proper solution" aren't likely to withhold their answers. The effect of the comment is to dissuade people asking questions, which is harmful to SO overall. – eyelidlessness May 02 '11 at 02:25
  • @eyelidlessness: Sorry about that, my comment *was* poorly-worded. I should have said "while", and not "instead of". At least "while" implies the question should still be asked, but waiting without also using the time to find a proper fix can potentially be a waste. Anyway, it's been two hours and nobody's come up with anything but conditional comments yet... – BoltClock May 02 '11 at 04:16
  • @BoltClock, I'm not sure why conditional comments aren't both sufficient and proper. They're entirely reliable, recommended, and pretty low-impact. – eyelidlessness May 02 '11 at 15:22
  • Does your css hack need to be valid? – Knu May 20 '11 at 16:03

4 Answers4

19

From the HTML5 Boilerplate and originally from Paul Irish:

Change your <html> tag to this:

<!--[if lt IE 7 ]> <html lang="en" class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->

Then IE8 will add a .ie8 class to the html tag. Same for all the other versions of IE. You can then do:

.ie8 {
    margin:100px;
}

Edit: Removed the no-js class, and please update the lang="" attribute to your language. Thanks, eyelidlessness.

Dan
  • 885
  • 6
  • 11
  • Note that `lang="en"` may not be appropriate, and that `no-js` is probably meant to be removed with a script early in the page load. – eyelidlessness May 02 '11 at 01:41
9

This should work only in IE9 (and probably newer versions as well):

:root #element-id {
  margin: 400px\9;
}

It is because :root pseudo class is not implemented in versions prior to IE9 (see http://msdn.microsoft.com/en-us/library/cc351024%28v=vs.85%29.aspx).

xemlock
  • 554
  • 1
  • 7
  • 9
  • this was the simplest and worked for me. It didn't target Firefox or Chrome either. I was still able to also only target IE8 specific styles as well. Thanks for the link! – d48 Dec 03 '13 at 19:57
3

You can use root function

:root #element { color:pink \0/IE9; } /* IE9 + IE10pp4 */

hack only on IE

#element {
color:orange;
}
#element {
*color: white;    /* IE6 + 7, doesn't work in IE8/9 as IE7 */
}
#element {
_color: red;     /* IE6 */
}
#element {
color: green\0/IE8+9; /* IE8 + 9 + IE10pp4  */
}
:root #element { color:pink \0/IE9; }  /* IE9 + IE10pp4 */
Neil Masson
  • 2,609
  • 1
  • 15
  • 23
Selvamani
  • 7,434
  • 4
  • 32
  • 43
1

There is three ways to do this,

IE Conditional Comments

IE conditional comment is probably the most commonly used to fix the IE bugs for specific versions (IE6, IE7, IE8). Below are some sample code to target different versions of Internet Explorer:

    <!--[if IE 8]> = IE8
    <!--[if lt IE 8]> = IE7 or below
    <!--[if gte IE 8]> = greater than or equal to IE8

<!--[if IE 8]>
<style type="text/css">
    /* css for IE 8 */
</style>
<![endif]-->

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

CSS Rules Specific to Explorer (IE CSS hacks)

Another option is to declare CSS rules that can only be read by Explorer. For example, add an asterisk (*) before the CSS property will target IE7 or add an underscore before the property will target IE6. However, this method is not recommended because they are not valid CSS syntax.

IE8 or below: to write CSS rules specificially to IE8 or below, add a backslash and 9 (\9) at the end before the semicolon.
IE7 or below: add an asterisk (*) before the CSS property.
IE6: add an underscore (_) before the property.

.box {

    background: gray; /* standard */

    background: pink\9; /* IE 8 and below */

    *background: green; /* IE 7 and below */

    _background: blue; /* IE 6 */

}

Conditional HTML Class

The third option, which was founded by Paul Irish, is to add an CSS class with the IE version to the HTML tag by using IE conditional comments. Basicially, it checks if it is IE, then add a class to the html tag. So to target specific IE version, simply use the IE class as the parent selector (eg. .ie6 .box). This is a clever way and it doesn't cause any validation errors.

<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html> <!--<![endif]-->
Sri
  • 496
  • 1
  • 5
  • 20