“Urrgh IE” I hear you say. No one likes it but we all have to work with. To be fair we should embrace it and use it as a tool to really understand how CSS works. Just be grateful you don’t have to use it to browse the web yourself.
Do not fear, it can be tamed. In this short guide I will explain how you can easily target the different versions of IE so that you can get your beautiful designs working for everyone.
Conditional Comments
These go directly into your HTML page and are only supported by IE so will not affect you page in other browsers.
Lets have a look at an example:
<!--[if IE 6]>
Specific markup for IE 6 goes here
<![endif]-->
As you can see it uses the same syntax as standard HTML comments but adds a bit to identify the browser. Anything between the comment markers will only be rendered if the page is displayed using an IE6 browser.
Similarly, you can use [if IE 5], [if IE 7] and [if IE 8] for the respective versions.
You also have the option to add lt(less than), lte(less than or equal to), gt(greater than), gte(greater than or equal to) after if to group versions together.
For example the following would target all versions of IE that were released before IE8.
<!--[if lt IE 8]>
Specific markup for IE browsers less than version 8
<![endif]-->
On the whole this is the best approach to take. It keeps your CSS clean and makes your work more readable.
Saying that, sometimes there is a case to say it isn’t worth doing it this way when if you are just debugging or experimenting. For this you can use quick, simple and dirty CSS hacks.
CSS Hacks
For IE8 and below use \9 after the value of a CSS declaration.
For IE7 and below use * before the property of a CSS declaration.
For IE6 use _ before the property of a CSS declaration
For example a CSS declaration targeting each browser individually would look like this:
div {
width: 400px; /* target modern browsers */
width: 420px\9; /* target IE8 */
*width: 380px; /* target IE7 */
_width: 350px; /* target IE6 */
}
It’s as simple as that.
if you have any suggestions on how I can improve this quick tip or think I have missed something important out please add a comment below…