David Bloom

CSS hack for IE8 Standards Mode

Wednesday, March 11, 2009 9:01:48 PM

Well, someone had to find one eventually...:-)

IE8 Standards-Mode Only:

.test { color /*\**/: blue\9 }

All IE versions, including IE8 Standards Mode:

.test { color: blue\9 }

You should probably use conditional comments instead, but sometimes a good old-fashioned CSS hack can get you out of a bind (especially when you don't want to have to grab another external stylesheet).

edit: Hmm, paul.irish in the comments mentions that this also affects IE7. I could have sworn I tested it in IE7...anyway, keep that in mind if you use it. I'll try to figure out what's up.

DisclaimerSecret Opera-only feature in Gmail

Comments

phpbubble # Monday, May 25, 2009 4:04:05 PM

Thanks a million bunch!!

Erick PerezChidoYo # Wednesday, June 3, 2009 9:02:01 PM

Hi, I found your blog and I'm hoping you can have a look at something I did.
I created a button using CSS I succesfully got the hover and down states to work using ":hover" & ":active". The button works on FF, IE6, IE7, Chrome and Safari. It does not work on Opera or IE8. Well I'm more concerned about it not working on IE8. On those browsers the down state only works if you click on the right corner. Have a look here:
http://www.chidissimmo.com/mybutton/
Thanks in advanced.

Paul Irishpaul.irish # Wednesday, June 3, 2009 11:19:06 PM

That hack matches in IE7 too. (7.0.5730.13 here)
See demo and writeup.

warrenz54 # Friday, June 12, 2009 8:37:31 PM

I've been waiting for this to come around.

Thank You!

natsukigirl # Thursday, July 9, 2009 4:00:01 PM

The hacks should be cascaded like this for best results:

.test
color: green;

.test
color /*\**/: red\9

.test
*color: blue;
_color: pink;

natsukigirl # Thursday, July 9, 2009 4:07:06 PM

Also, for something more complicated than changing colors it doesn't always work (example: if I wanted to ie8 hack this rule - background: #fff url(image.gif) top left; - it doesn't work). This hack works great for simple rules like width, margin, padding and so on, but would be better if it covered everything you'd need like the holly and underscore hacks. If you find one, let me know. lol

natsukigirl # Wednesday, December 16, 2009 10:23:31 PM

Okie dokie... found something better. Here you go:

.test {
color: red;\
color: blue;
}
/*end*/
/*\*/
html*.test {
[color: green;
]color: purple;
}/*end*/
.dummyend[id]{clear:both;}

/*\*/
* html .test {
color: pink;
}
/*end*/

@media screen and (-webkit-min-device-pixel-ratio:0) {
.test { color: black; }
}

------

* ie8 is red. standard/firefox is blue. older mozilla is green. ie7 is purple. ie6 is pink. safari is black.

hummh # Thursday, January 28, 2010 8:31:41 AM

@mmhmm
Your code sample matches also IE7 because you used a ";"

#veinte { color/*\**/: blue\9; }

If you want to address only IE 8 you have to omit the ";".

#veinte { color/*\**/: blue\9 }

What I also found out. With this hack it is not possible to add more than one rule inside the brackets. If you need more CSS rules, than you have to write each in a separate rule.

#veinte { color/*\**/: blue\9 }
#veinte { background-color/*\**/: yellow\9 }