How to target IE7, IE8 and IE9

Everybody knows Internet Explorer is a pain when it comes to coding a website. Many users don’t care what browser they are using as long as it browses the internet. Sadly, most of these users are on IE7, IE8, and IE9 because that is what comes installed with a new PC. Luckily, there are several ways to target IE.

The Right Way

CSS Conditional Comments Way #1

This is the simplest way to target Internet Explorer. You can tweak the below code to your liking. Using these conditional comments we can give the HTML tag a class of whatever version of IE we want to target.

<!doctype html>
<!--[if IE 7]><html lang="en" class="ie ie7"><![endif]-->
<!--[if IE 8]><html lang="en" class="ie ie8"><![endif]-->
<!--[if IE 9]><html lang="en" class="ie ie9"><![endif]-->
<!--[if !IE]><!--><html lang="en"><!--<![endif]-->
    <head></head>
    <body></body>
</html>

Usage

.ie7 body { 
    border: 1px solid #000;
}
.ie8 body { 
    border: 1px solid #000;
}

Another Way

CSS Conditional Comments Way #2

You can include this code in the <head> section of your HTML to target the Internet Explorer version of your choice. These conditionals are not limited to only css stylesheets. You can use them to add HTML and Javascript that only IE users can see.

All versions of IE

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

IE7 Only

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

IE8 Only

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

IE9 Only

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

IE7 and up

<!--[if gte IE 7]><link rel="stylesheet" type="text/css" href="ie7-and-up.css" /><![endif]-->

IE8 and up

<!--[if gte IE 8]><link rel="stylesheet" type="text/css" href="ie8-and-up.css" /><![endif]-->

The Bad Way

CSS Hacks

It’s a bad practice to use CSS hacks, but to make a minor change in IE might be acceptable.

IE6 Only

* html #div { 
    height: 300px;
}

IE7 Only

*+html #div { 
    height: 300px;
}

IE8 Only

#div {
  height: 300px\0/;
}

IE7 and IE8 Only

#div {
  height: 300px\9;
}

2 thoughts on “How to target IE7, IE8 and IE9

Comments are closed.