How to Target IE6, IE7, and IE8 in CSS

Internet Explorer

Internet Explorer has always caused trouble among many web designers and developers, whether it was because of certain features not implemented correctly (or even at all), alignment issues, and even syntax compliance among other browsers as well.

However, here I’ll show you some really easy “hacks” to specifically target certain versions of Internet Explorer. While I highly advise that you not use these hacks (as they may not be future proof), I will say that it is quite helpful to learn these in case you may need to use it for prototyping or for a specific temporary purpose. The best way, of course, is to always use conditional statements instead (which I will show below).

Anyhow, here are certain ways to target specific versions of Internet Explorer:

Internet Explorer


IE8

body{
background-color: blue; /* all browsers */
background-color: red\0/; /* IE8-9 */
background-color: red \0; /* IE8 and below (notice the white space after the value ) */
}

By using a backslash, the number zero,  followed by a forward slash on the value, we are able to target IE8 specifically. As for targeting IE8 and below, adding a backslash followed by the number nine will do the trick.


IE7

body{
background-color: blue; /* all browsers */
*background-color: red; /* IE7 and below */
}

Using an asterisk before the property, we are able to target IE7 and below.


IE6

body{
background-color: blue; /* all browsers */
_background-color: red; /* IE6 specifically */
}

As you can see, by using the underscore before the property, it allows ie6 to be targeted specifically.


Best Way to Target Internet Explorer

The best way to target Internet Explorer is, like I said earlier, to use conditional statements. Here are a couple of examples of how to use conditional statements in your code to target various versions of Internet Explorer:

Target all of IE

<!--[if IE]>
<style>
/* CSS for all versions of IE */
</style>
<![endif]-->

Target IE 6 specifically

<!--[if IE 6]>
<style>
/* CSS for IE 6 only */
</style>
<![endif]-->

Target IE 6 and up

<!--[if gte IE 6]>
<style>
/* CSS for all versions of IE 6 and up */
</style>
<![endif]-->

Target IE 8 and below

<!--[if lte IE 8]>
<style>
/* CSS for all versions of IE 8 and below */
</style>
<![endif]-->

By using these if statements in your code, you can target any version of Internet Explorer to your liking. You can also combine any of them to suit them to your needs as well. By doing this, it is much more valid and will be much more compliant for future browsers.

Conclusion

While Microsoft has lately been adamant about being W3C compliant now, especially with Internet Explorer 9+, there are still a few people out there who use the older versions of IE (primarily IE 6) which has caused many headaches from web designers everywhere. While the thought of designing for IE6 is dwindling, there are still cases where a client may want to design for such an old browser. However, with these tricks, you can lessen your headache by applying what I just taught to get your website closer to pixel perfect.

 

Other Articles You Might Like:

 

2 thoughts on “How to Target IE6, IE7, and IE8 in CSS

  1. Hello,

    I have found one issue with this which i am submitting here
    background-color: red/; /* IE8 only */ => This applys to ie9 also
    background-color: red\9; /* IE8 and below */ => This applys to ie9 also

    • Yes you’re correct about the first point. I’ve updated the article. Thanks.
      Make sure that you have:

      background-color: red\0/; /* IE8-9 */
      background-color: red \0; /* IE8 only (notice the whitespace after the color value) */

      instead of:

      background-color: red/; /* IE8-9 (missing the 0 in between the backslash and forward slash) */

      Also, make sure that all the “hackish” CSS styles go after the default CSS styles and not the other way around. For example:

      background: green; /* default background color for all browsers */
      background: red \0; /* background color for IE8 */

      Hope that helps.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>