aLemmer

Problem

Internet Explorer tends to render code deformedly due to its disregard to web standards. Thusly, there’s a problem with the way your website looks in IE; you need to target specific code to IE in order to apply a fix.

Solution

By using conditional comments you can not only target IE, but specific versions of IE as well. Let’s say we’re trying to apply an external CSS to fix a bug in IE.

1
2
3

<!--[if IE]>
<link href="ie_fix.css" rel="stylesheet" />
<![endif]-->

The code above specifies that if the browser is Internet Explorer then <link href="ie_fix.css" rel="stylesheet" /> will be acknowledged.

Let’s say you want to target specific versions of Internet Explorer. For example if you’ve tried IE 8 you probably have noticed the rendering improvements, and you might want to only target versions below IE 8.

1
2
3

<!--[if lt IE 8]>
<link href="ie_fix.css" rel="stylesheet" />
<![endif]-->

Above we can read that if the version of IE is less than eight, then <link href="ie_fix.css" rel="stylesheet" /> is acknowledged.

You can use the conditions lt (less than), e (equal to), and gt (greater than) to target specific versions of IE. You can use e in combination with lt and gt, as well as leaving it on its own. I’ll show a couple examples below.

1
2
3

<!--[if gte IE 6]>
<p>IE is greater than, or equal to IE 6.</p>
<![endif]-->

1
2
3

<!--[if e IE 8]>
<p>You're using IE 8.</p>
<![endif]-->

You can read more about conditional comments through Wikipedia’s article: “Conditional comment”.