'Quick and Dirty’ CSS Hacks For IE

Posted on October 11, 2013

After spending all day today fixing the way websites look on Internet Explorer (IE), I realized it was good time to share a few CSS hacks that apply for different versions of IE. These CSS hacks will save you a lot of time and will ensure that your websites look as they should across every browser.

A CSS hack consists of using specific characters that can only be read by the browser that you are targeting. Below are a few examples of an element that has a top margin of 15px and a CSS hack to make that margin have a value of 20px on different versions of IE.

CSS Hack For IE6

#element {
  margin-top: 15px;
  _margin-top: 20px;
}

CSS Hack For IE7

#element {
  margin-top: 15px;
  *margin-top: 20px;
}

CSS Hack For IE8 & IE9

#element {
  margin-top: 15px;
  margin-top: 20px /;
}

Conditional Stylesheets

Alternatively, you may use conditional statements that loads additional stylesheets depending on the IE version of the user’s browser. Like so:

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

I hope you find these hacks useful and feel free to share your thoughts!

< Go back