Target IE versions with CSS “Hacks”

Found an article today that I found useful while trying to sort a little issue I had with the lack of CSS3 support in older versions of Internet Explorer.

Target IE versions with CSS “Hacks”

Here are the hacks that let you target specific IE versions.

Use “\9” to target IE8 and below.
Use “*” to target IE7 and below.
Use “_” to target IE6.

Example:

body {
border:1px solid red; /* standard */
border:1px solid blue\9; /* IE8 and below */
*border:1px solid orange; /* IE7 and below */
_border:1px solid blue; /* IE6 */
}

If you don’t like using “Hacks” then you can explicitly target IE versions without hacks using HTML and CSS

Use this approach if you don’t want hacks in your CSS. Add a browser-unique class to the <html>element so you can select based on browser later.

Example

<!doctype html>
<!–[if IE]><![endif]–>
<!–[if lt IE 7 ]> <html lang=”en” class=”no-js ie6″> <![endif]–>
<!–[if IE 8 ]> <html lang=”en” class=”no-js ie8″> <![endif]–>
<!–[if IE 9 ]> <html lang=”en” class=”no-js ie9″> <![endif]–>
<!–[if (gt IE 9)|!(IE)]><!–><html lang=”en” class=”no-js”><!–<![endif]–>
<head></head>
<body></body>
</html>
Then in your CSS you can very strictly access your target browser.

Example

.ie6 body {
border:1px solid red;
}
.ie7 body {
border:1px solid blue;
}

Original article here… http://stackoverflow.com/questions/814219/how-to-target-ie7-ie8-with-css-valid-code

Leave a Reply