This article has been updated from an older version (originally Sept 24, 2007). I just wanted to expand it and make it more clear.<\/div>\n

If you read this blog, there is a 99% chance you’ve had a hair-pulling experience with IE. But if you are worth your salt as a CSS coder, you should be able to deal with it. I am of the opinion that you can handle anything IE can throw at you without the use of hacks. Hacks are dangerous, since they are based on non-standard exploits, you can’t predict how they are going to behave in future browsers. The tool of choice for fighting IE problems is the conditional stylesheet<\/strong>. IE provides comment tags, supported all the way up to the current IE 8 to target specific versions, as well as greater-than\/less-than stuff for targeting multiple versions at once.<\/p>\n

<\/p>\n

Why use conditional stylesheets?<\/h3>\n
\n
You got problems, they need fixin’<\/li>\n
Keeps your code hack-free and valid<\/li>\n
Keeps your main stylesheet clean<\/li>\n
Perfectly acceptable technique, sanctioned by Microsoft<\/li>\n<\/ul>\n
And remember, these conditional tags don’t have to be used only for CSS. You could load JavaScript, or even use them down in the content of your site to display special IE-specific messages.<\/p>\n
The Code<\/h3>\n
This would go in your <head> with all the other regular CSS <link>ed CSS files. The opening and closing tags should be familiar, that’s just regular ol’ HTML comments<\/a>. Then between the brackets, “IF” and “IE” should be fairly obvious. The syntax to note is “!” stand for “not”, so !IE means “not IE”. gt<\/tt> means “greater than”, gte<\/tt> means “greater than or equal”, lt<\/tt> means “less than”, lte<\/tt> means “less than or equal.”<\/p>\n
Note that IE 10 and up DO NOT support conditional comments at all.<\/strong><\/p>\n
Target ALL VERSIONS of IE<\/h4>\n<\/code><\/pre>\nTarget everything EXCEPT IE<\/h4>\n\r\n\t<link rel=\"stylesheet\" type=\"text\/css\" href=\"not-ie.css\" \/>\r\n <\/code><\/pre>\nTarget IE 7 ONLY<\/h4>\n<\/code><\/pre>\nTarget IE 6 ONLY<\/h4>\n<\/code><\/pre>\nTarget IE 5 ONLY<\/h4>\n<\/code><\/pre>\nTarget IE 5.5 ONLY<\/h4>\n<\/code><\/pre>\nTarget IE 6 and LOWER<\/h4>\n<\/code><\/pre>\n<\/code><\/pre>\nTarget IE 7 and LOWER<\/h4>\n<\/code><\/pre>\n<\/code><\/pre>\nTarget IE 8 and LOWER<\/h4>\n<\/code><\/pre>\n<\/code><\/pre>\nTarget IE 6 and HIGHER<\/h4>\n<\/code><\/pre>\n<\/code><\/pre>\nTarget IE 7 and HIGHER<\/h4>\n<\/code><\/pre>\n<\/code><\/pre>\nTarget IE 8 and HIGHER<\/h4>\n<\/code><\/pre>\n<\/code><\/pre>\nTarget IE 10<\/h4>\nRead this.<\/a><\/p>\n Universal IE 6 CSS<\/h3>\nDealing with IE 6 and below is always an extra-special challenge. These days people are dropping support for it right and left, including major businesses, major web apps, and even governments. There is a better solution than just letting the site go to hell, and that is to serve IE 6 and below a special stripped-down stylesheet, and then serve IE 7 and above (and all other browsers) the regular CSS. This is been coined the universal IE 6 CSS<\/a>. <\/p>\n \r\n <link rel=\"stylesheet\" type=\"text\/css\" media=\"screen, projection\" href=\"REGULAR-STYLESHEET.css\" \/>\r\n\r\n\r\n\r\n\r\n<\/code><\/pre>\nHacks<\/h3>\nIf you must…<\/p>\nIE-6 ONLY<\/h4>\n* html #div { \r\n height: 300px;\r\n}<\/code><\/pre>\nIE-7 ONLY<\/h4>\n*+html #div { \r\n height: 300px;\r\n}<\/code><\/pre>\nIE-8 ONLY<\/h4>\n#div {\r\n height: 300px\\0\/;\r\n}<\/code><\/pre>\nIE-7 & IE-8<\/h4>\n#div {\r\n height: 300px\\9;\r\n}<\/code><\/pre>\nNON IE-7 ONLY:<\/h4>\n#div {\r\n _height: 300px;\r\n}<\/code><\/pre>\nHide from IE 6 and LOWER:<\/h4>\n#div {\r\n height\/**\/: 300px;\r\n}<\/code><\/pre>\nhtml > body #div {\r\n height: 300px;\r\n}<\/code><\/pre>\nArgument against conditional stylesheets<\/h3>\nWe shouldn’t need them. They are against the spirit of web standards.<\/p>\n Argument for conditional stylesheets<\/h3>\nYeah, but we do need them.<\/p>\n Additional Resources<\/h3>\n\nIE bugs that’ll get you every time.<\/a><\/li>\n Documentation of IE bugs<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"This article has been updated from an older version (originally Sept 24, 2007). I just wanted to expand it and […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"_share_on_mastodon":"0","_share_on_mastodon_status":"%title% %permalink%"},"categories":[4],"tags":[],"class_list":["post-132","post","type-post","status-publish","format-standard","hentry","category-articles"],"acf":{"show_toc":"No"},"share_on_mastodon":{"url":"","error":""},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":16469,"url":"https:\/\/css-tricks.com\/downlevel-hidden-downlevel-revealed\/","url_meta":{"origin":132,"position":0},"title":"Downlevel Hidden \/ Downlevel Revealed","author":"Chris Coyier","date":"March 13, 2012","format":false,"excerpt":"Just gonna clear up a little thing here that I've seen people struggle with a few times. There are two different kinds of conditional comments for Internet Explorer that have slightly different syntaxes: Downlevel Hidden and Downlevel Revealed (microsoft docs). Downlevel Hidden You likely know that HTML comments are like\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1195,"url":"https:\/\/css-tricks.com\/is-there-any-dedicated-css-hacks-for-safari-or-opera\/","url_meta":{"origin":132,"position":1},"title":"Is There Any Dedicated CSS Hacks For Safari or Opera?","author":"Chris Coyier","date":"October 15, 2008","format":false,"excerpt":"This question was sent in by Marcin Lachowski. Back in the day, there used to be a hack for Safari using the pound (#) sign. Safari didn't like that symbol, so you could declare something like this: p { color: red; } p { color: black;# } Every other browser\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1079,"url":"https:\/\/css-tricks.com\/links-of-interest-50\/","url_meta":{"origin":132,"position":2},"title":"Links of Interest","author":"Chris Coyier","date":"September 30, 2008","format":false,"excerpt":"Browser Differences I Can Live With For a beautiful web has a nice article on acceptable cross-browser differences. Essentially, progressive enhancement typography stuff and then things like border-radius. I completely agree. I guess that answers this question. \u00a0 Feed IE6 With a Basic Stylesheet A lot of times when you\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":9539,"url":"https:\/\/css-tricks.com\/ie-iframe-quirksmode\/","url_meta":{"origin":132,"position":3},"title":"In IE, iFrames on Pages in Quirks Mode Also in Quirks Mode","author":"Chris Coyier","date":"May 26, 2011","format":false,"excerpt":"Just wanted to make sure that this was documented. Here's what I think the most important lesson is: If you are creating a page using HTML5 and you think there is some reasonable chance that someone may embed this page on another via iframe, you should use the HTML5 shim\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1994,"url":"https:\/\/css-tricks.com\/select-cuts-off-options-in-ie-fix\/","url_meta":{"origin":132,"position":4},"title":"Select Cuts Off Options In IE (Fix)","author":"Chris Coyier","date":"January 13, 2009","format":false,"excerpt":"I think the problem is fairly obvious here. If you set a static width on the element and the width of the text in the are wider than that, the text gets cut off in IE 6-8. There is no good pure-CSS solution for this that I can come up\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2009\/01\/expand.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2009\/01\/expand.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2009\/01\/expand.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2009\/01\/expand.png?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":154502,"url":"https:\/\/css-tricks.com\/conditional-media-query-mixins\/","url_meta":{"origin":132,"position":5},"title":"Conditional Media Query Mixins","author":"Chris Coyier","date":"October 30, 2013","format":false,"excerpt":"Using a @mixin in Sass for your media queries is useful for a variety of reasons. The most important of which is probably the cognitive ease of having the properties and values you are changing right next to the originals. But another reason is that you then gain the ability\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/132","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=132"}],"version-history":[{"count":14,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/132\/revisions"}],"predecessor-version":[{"id":195865,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/132\/revisions\/195865"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=132"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=132"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=132"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

Target IE 10<\/h4>\n
Read this.<\/a><\/p>\n

Hacks<\/h3>\n
If you must…<\/p>\n

Argument against conditional stylesheets<\/h3>\n
We shouldn’t need them. They are against the spirit of web standards.<\/p>\n

Argument for conditional stylesheets<\/h3>\n
Yeah, but we do need them.<\/p>\n