is there any IE8 only css hack?

Question

For Internet Explorer 8 (IE8) I'd like to use the following CSS:

color : green;

I would like to apply a hack which only affects IE8, not to IE9, IE6 and 7.

Answer 1

Use conditional comments in HTML, like this:

<!--[if IE 8]>
<style>...</style>
<![endif]-->

See here: http://www.quirksmode.org/css/condcom.html

You can test for IE versions reliably and also be sure other browsers won't be confused.

Answer 2

Use media queries to separate each browser:

/* IE6/7 uses media, */
@media, { 
        .dude { color: green; } 
        .gal { color: red; }
} 

/* IE8 uses \0 */
@media all\0 { 
        .dude { color: brown; } 
        .gal { color: orange; }
} 

/* IE9 uses \9 */
@media all and (monochrome:0) { 
          .dude { color: yellow\9; } 
          .gal { color: blue\9; }
} 

/* IE10 and IE11 both use -ms-high-contrast */
@media all and (-ms-high-contrast:none)
 {
 .foo { color: green } /* IE10 */
 *::-ms-backdrop, .foo { color: red } /* IE11 */
 }

References

• Alphabetical list of CSS reference · WebPlatform Docs

• Microsoft CSS Vendor Extensions

Answer 3

Use \0.

color: green\0;

I however do recommend conditional comments since you'd like to exclude IE9 as well and it's yet unpredictable whether this hack will affect IE9 as well or not.

Regardless, I've never had the need for an IE8 specific hack. What is it, the IE8 specific problem which you'd like to solve? Is it rendering in IE8 standards mode anyway? Its renderer is pretty good.

Answer 4

If needed small changes in CSS use \9 it targets IE8 and below (IE6, IE7, IE8)

.element { 
   color:green \9;
 }

Best way is to use conditional comments in HTML, like this:

<!--[if IE 8]>
<style>...</style>
<![endif]-->

Answer 5

So a recent question prompted me to notice a selector set hack for excluding IE 8 only.

.selector, #excludeIE8::before {} will cause IE 8 to throw out the entire selector set, while 5-7 and 9-11 will read it just fine. Any of the :: selectors (::first-line, ::before, ::first-letter, ::selection) will work, I've merely chosen ::before so the line reads accurately. Note that the goal of the fake ::before selector is to be fake, so be sure to change it to something else if you actually have an element with the ID excludeIE8

Interestingly enough, in modern browsers (FF 45-52, GC 49-57, Edge 25/13) a bad :: selector eats the entire selector set (dabblet demo). It seems that the last Windows version of Safari (and LTE IE 7, lol) doesn't have this behavior while still understanding ::before. Additionally, I can't find anything in the spec to indicate that this is intended behavior, and since it would cause breakage on any selector set containing: ::future-legitimate-pseudoelement... I'm inclined to say this is a bug- and one that'll nibble our rears in the future.

---

However, if you only want something at the property level (rather than the rule level), Ziga above had the best solution via appending  \9 (the space is key; do NOT copypaste that inline as it uses an nbsp):

/*property-level hacks:*/
/*Standards, Edge*/
prop:val;
/*lte ie 11*/
prop:val\9;
/*lte ie 8*/
prop:val \9;
/*lte ie 7*/
*prop:val;
/*lte ie 6*/
_prop:val;

/*other direction...*/
/*gte ie 8, NOT Edge*/
prop:val\0;

---

Side note, I feel like a dirty necromancer- but I wanted somewhere to document the exclude-IE8-only selector set hack I found today, and this seemed to be the most fitting place.

Answer 6

Doing something like this should work for you.

<!--[if IE 8]> 
<div id="IE8">
<![endif]--> 

*Your content* 

<!--[if IE 8]> 
</div>
<![endif]--> 

Then your CSS can look like this:

#IE8 div.something
{ 
    color: purple; 
}

Answer 7

There are various ways to get a class onto the HTML element, identifying which IE version you're contending with: Modernizr, the HTML 5 Boilerplate, etc - or just roll your own. Then you can use that class (eg .lt-ie9) in a normal CSS selector, no hack needed. If you only want to affect IE8 and not previous versions, put the old value back using a .lt-ie8 selector.

Answer 8

Can you not use the hack you've already shown, and then use an IE7 and below hack to override it?

Answer 9

For IE8 native browser alone:

.classname{
    *color: green; /* This is for IE8 Native browser alone */
}

Answer 10

I was looking for a good option for IE10 and below CSS styling (but it would work for IE8 only as well) 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.

Answer 11

This will work for Bellow IE8 Versions

.lt-ie9 #yourID{

your css code

}