CSS:Browser CSS hacks for IE6,IE7,IE8,IE9

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;
  }  
}

Janeth Kent

Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN AND DEVELOPMENT.