CSS Hacks for IE6, IE7, IE8, IE9

Browser specific CSS Hacks

Did you know that there are specific CSS hacks for IE that allow you to target IE8, IE7 and IE6?

We, web developers, are constantly faced with deficiencies of Internet Explorer, and CSS hacks allow to overcome them in most cases.

In this post I would like to group the CSS hacks for each of the popular versions of IE. Most likely you already know the CSS hacks for IE6 and IE7, but for IE8 and IE9 probably not. You would really love
them because they are useful & help you get your design closer to pixel perfect.

CSS hack for Internet Explorer 6

~ Called as Star HTML Hack

.class {
_height:300px;
_width:300px;
}
OR

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

CSS hack for Internet Explorer 7

.class {
!height:300px;
!width:300px;
}

OR

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

CSS hack for Internet Explorer 8

.class {
height/*\**/: 300px\9;
width: /*\**/: 300px\9;
}

OR

@media \0screen {
  .class {
   Padding-top: 10px;
}
}

CSS hack for Internet Explorer 9

:root .class {
      Padding-top: 10px;
}

With these ! Or _ declarations, you can change the height, width, padding, margin etc any Css for IE6, IE7, IE8 & it won’t affect firefox & most other browsers.

CSS hack for FireFox

@ -moz-document url-prefix() {
.class {
   Padding-top: 10px;
}
}