Every HTML Integrator need to use CSS hack one time during his career. Sometimes, Internet Explorer is rebellious, or an other browser interprate a rule in his own way, it can be very useful in order to have a website compatible on every browsers.

Let’s begin by conditionnal comments, we will see how to set a special stylesheet for a special IE version.

Conditionnal comments

Every IE versions

<!--[if IE]>
  Here the code for IE

A specific version of IE

<!--[if IE 5.0]> for IE 5.0 <![endif]-->

<!--[if IE 5.5000]> for IE 5.5 <![endif]-->

<!--[if IE 6]> for IE 6.0 <![endif]-->

<!--[if IE 7]> for IE 7.0 <![endif]-->

<!--[if IE 8]> for IE 8.0 <![endif]-->

<!--[if IE 9]> for IE 9.0 <![endif]-->

For many versions of IE

<!--[if comparator IE version]>
    Here the code respecting the condition

The “comparator” can have this values:

  • gte : greater than equal
  • gt : greater than
  • lte : less than equal
  • lt : less than

You can use these operation too :

  • | : or
  • & : and
  • ! : not

Some examples :

<!--[if lte IE 9]> Less than equal IE9<![endif]-->

<!--[if gt IE 7]> Greater than IE7<![endif]-->

<!--[if (lt IE 6)|(IE 8)]> less than IE6 or IE8 <![endif]-->

<!--[if (gt IE 5)&(!IE 7)]> Greater than IE5 and not IE7 <![endif]-->

<!--[if !IE]><!--> Not IE browser <!--<![endif]-->

If you want to add a specific CSS stylesheet :

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

CSS Hacks

Selectors Hacks

Warning ! This hacks should be used with moderation !

* html myselector{} // IE 6 et inférieurs
* > myselector{} // Tous sauf IE6
* + html myselector{} // IE7 uniquement
*:first-child+html myselector{} // IE7 uniquement

Attributes Hacks

You can target the attribute of the selector :

.test { _color: blue } // IE6
.test { *color: blue /* or #color: blue */ } // IE6 or IE7
.test { color: blue\9 } // IE6 or IE7 or IE8

So you know the most usefull CSS hacks, if you want more, you can go on this website

The final word

I hope this article has been usefull for you ! To finish, I will explain how I use conditionnal comments on my websites. First, i have a global CSS for every browsers. After, I add specific CSS for IE :

<link href="css/reset.css" media="screen" rel="stylesheet" type="text/css" />
<link href="css/styles.css" media="screen" rel="stylesheet" type="text/css" />

<!--[if lt IE 9]>
<link media="all" type="text/css" rel="stylesheet" href="css/iefix.css">
<!--[if IE 7]>
<link media="all" type="text/css" rel="stylesheet" href="css/iefix7.css">
<!--[if IE 6]>
<link media="all" type="text/css" rel="stylesheet" href="css/iefix6.css">

If you have an other way to do, you can explain it on the comments 😉

Memo : Conditional comments and CSS hacks (IE6, IE7, IE8, etc…)
Tagged on:             

Leave a Reply

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

We use cookies to ensure that we give you the best experience on our website.