IE Only Stylesheets and CSS

Written by Craig McNamara on 30 December 2012

Targeting IE with specific CSS, is always a awful task, however I thought I’d cover the two basic ways to do it: in HTML using conditional CSS and in stylesheets using hacks.

Conditional CSS

Conditional CSS lets you include a specific IE only stylesheet on your HTML page. It is the preferred way of having targeted IE specific CSS and is guaranteed to work with future version of IE, something that cannot be said for the hacks.

You can target:

A specific version <!--[if IE 6]>
All version below a specific version <!--[if lt IE 6]>
All versions above a specific version <!--[if gt 6]>
All version below or equal to a specific version <!--[if lte IE 6]>
All version above or equal to a specific version <!--[if gte IE 6]>

Let’s look at including a stylesheet only for IE6 in the <head> element.

Option A – Using the style block

<!--[if IE 6]>
<style>
	/* Magical IE 6 CSS goes here */
	background-color: red;
</style>
<![endif]-->

Option B – Including a Stylesheet

<!--[if IE 6]>
	<link href="ie6.css" rel="stylesheet" type="text/css"/>
<![endif]-->

In Stylesheet Hacks

In Stylesheet hacks work within a CSS file. They let you target a specific block of styling, or a specific line in your file.

Line Hacks

Line hacks allow you to target versions of IE with a single link of CSS.

IE 8 only
```
background-color: red\0/;
```
IE 8 and below
```
background-color: red\9;
```
IE 7 and below
```
*background-color: red;
```
IE 6 only
```
_background-color: red;
```

Block Hacks

Block hacks let you use the element selectors to target versions of IE. Obviously this lets you target multiple lines all at once

IE-7 only
```
*+html #div {
	background-color: red;
}
```
IE 6 only
```
* html #div {
	background-color: red;
}
```

IE Only Stylesheets and CSS

Conditional CSS

In Stylesheet Hacks

Line Hacks

Block Hacks

IE 6 only

Latest

Hot Topics