Showing CSS to IE only (The Underscore Hack) [Update]
This page details an inline CSS hack for Internet Explorer 6 on Windows.
You can also find an inline CSS hack for Internet Explorer 7.
The best idea, however, would be to serve a separate stylesheet for each browser you’re hacking to.
Recently, I stumbled upon (via Mr. van Kesteren) the best CSS “hack” you’ll ever use in CSS sites.
It allows you to show CSS to Internet Explorer only, omitting Mozilla, Safari and Opera.
This is different from conditional comments in the following way:
- It allows you to write conditional CSS directly in your stylesheet file, and doesn’t require inline styles
- It works for IE 5.0, 5.5 and 6.0
- It’s a hack
- It’s very simple to work with.
The hack is called the “Underscore Hack”, and apparently it’s been around for a while. For the benefit of those of us who didn’t know about it, I’m posting it here:
body { background: green; /* show to Mozilla/Safari/Opera */ _background: red; /* show to IE */ }
Cons
- The CSS won’t validate
- The hack won’t work for IE5/Mac. For this platform, I recommend the IE5/Mac Band Pass Filter hack
Sample Page
View sample page, including CSS
More Information on CSS filtering
John Serris has done an indepth write-up on various other methods of filtering CSS. It is definitely worth a visit:
- Kent to Play New Single at Swedish Grammies
- Showing CSS to IE only (The Underscore Hack) [Update]
- Bush kills Hubble
- Press Pause
I'd just like to say that I love the design of your site. Truly talented you are! The hack is great as well!
Quote
I used the underscore hack with my new forums, and I must say, it worked as advertised. While there are better ways of doing it, this is the easiest. And I don't care about my css validating (it's difficult enough for me to keep my pages validating!)
Thanks! =]
Quote
It must be noted that IE 7 doesn't like it much.
IF IE statements are much prefered (alas, but true!).
Quote
Nicely done, I knew abotu this before, just googled for it because I couldnt remember how. An underscore, so very easy... works because in css an underscore is a comment while IE isnt css compliant and ignores it. I wonder if that is why microsoft kept it?
Quote
thank you .. u helped me a lot
Quote
Doesn' seem to work in the newest version of ie (6.0.2900.2180 sp2)
Quote
Works for me on that version of IE just fine.
Quote
Quote
This works better for us
padding-top:12px;
*padding-top:14px;
padding-bottom:13px;
*padding-bottom:10px;
Quote
Wow, this is one of the best tips I have EVER come across. Seriously, if I only knew this a year ago, days of my life would have not been lost! Thank you for sharing this! Awesome!
I am using in this way: _height:100%; _overflow-y:auto;
...so that I can use position:fixed bottom:0 in IE
Quote
I love this trick, and miss it in IE7 :)
Quote
nice tip, works in IE7 and IE8 beta 2 ( Browser Mode: IE7 / IE8 compatibility view / IE8 with Document Mode:Quirks ( Page Default ) ) also.
Quote
it is compatible with ie7 and ie8 in quirks mode as I mentioned above. This means you need a non valid HTML page :( for this to work.
Quote
Great hack! Nice it works in IE8 too. care if it's not valid, as long as it works :)
Quote
Thanks Dear,,,
Its really works
Quote
This is rather outdated. Please, please use conditional comments. They are far, far, less likely to break things in the future. (As long as you don't target future IE versions)
Read more about it at sitepoint: http://reference.sitepoint.com/css/conditionalcomments
Quote
I'm not able to use this hack, as it is not working with my IE7 version 7.0.5730.11
How come?
Quote
Because the underscore hack is for IE6 only.
You can use these hacks for IE7:
http://noscope.com/journal/2008/11/ie6-ie7-inline-css-hacks
though you should consider using a separate IE7 stylesheet using conditional comments:
http://noscope.com/journal/2004/04/ie-conditional-comments
Quote