CSS Articles, Tutorials & Posts
Conditional CSS in IE
Today I needed to apply a CSS tweak due to a rendering hiccup when viewing a site with IE6. After a bit of Googling, I remembered something I’d seen that was a relatively simple hack to serve up extra CSS instructions to a particular version of Internet Explorer.
Conditional comments can be included within a document that the IE engine will pickup and process:
<!--[if lt IE 7]> <style>@import url(css/ie6.css);</style> <![endif]-->
Not only can this be used to include additional stylesheet instructions, but it can be applied within the of a page for IE specific content.
A bit of research told me that there are a number of conditions that can be applied:
- [if IE 6] - if equal to version 6
- [if lt IE 6] - if less than version 6
- [if lte IE 6] - if less than or equal to version 6
- [if gt IE 6] - if greater than version 6
- [if gte IE 6] - if greater than or equal to version 6
Exact version numbers of IE can be used, such as 6.014 etc. but it might be easier to stick to whole numbers.
