http://blog.vervestudios.co/blog/post/2011/05/13/IE9-Only-CSS-Hack.aspx
My GoogleFu turned up nothing today when searching for IE9 only CSS hacks. After a couple hours of searching, and combining the hacks found in Paul Irish's excellent post about Browser CSS Hacks I gave up. I just moved on. I settled for that 1px difference between every other browser and IE9.
Apparently my subconscience was still working on the problem for me. Suddenly had an idea, well, a question, actually:
"Whats new in IE9?"
I'll tell you whats new, media query expressions. Specifically, the and (min-width:value) part.
Demo:
I haven't tested this in IE 10 yet...so feel free to give it a go and let me know.
p.s. CSS hacks are usually bad. You should probably do this instead.
Apparently my subconscience was still working on the problem for me. Suddenly had an idea, well, a question, actually:
"Whats new in IE9?"
I'll tell you whats new, media query expressions. Specifically, the and (min-width:value) part.
Update (18 May 2011): Mathias Bynens (twitter) posted a comment explaining that the
:root selector is new in IE9! The @media all and (min-width:0) part as been removed in favor of this method. Thanks Mathias! Update (13 June 2011): This hack is a bit mysterious as doesn't work on all properties (like
Ta-freaking-Da:background, for instance) and isn't considered "safe" (yet). Checkout Mathias' post on safe css hacks.1 2 3 4 5 6 7 8 9 10 11 12 13 | #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 */}:root #element { color:pink \0/IE9; } /* IE9 */ |
I haven't tested this in IE 10 yet...so feel free to give it a go and let me know.
p.s. CSS hacks are usually bad. You should probably do this instead.
