Targeting IE Using CSS Hacks

Without a doubt, one of the most difficult aspects of web design is achieving cross-browser consistency. The problems generally arise because of defects in the browsers' implementation of CSS, defects in their interpretation of the standards (think the box-model bug), or gaps in their coverage of the standards - some of which are gaping.

The gaps aren't as troublesome as the defects though. Where there are defects, or disagreements in either the interpretation or implementation of CSS, you often need to apply different styles depending on which browser is being used. Here are some simple but handy CSS hacks that you can use to target styles to specific browsers.

Actually, all you really need are hacks to target IE6 and IE7, since most other browsers play ball. IE6 can be targeted with the underscore hack by simply prepending an underscore to the style. IE7 fixed this defect, but still responds to the asterisk hack, which is exactly the same but uses an asterisk instead of an underscore.

div.example {
   width: 300px;    /* applied in all browsers     */
   *width: 350px;   /* applied to IE6 and IE7 only */
   _width: 360px;   /* applied to IE6 only         */
}

Although people warn about hacks falling over as browser defects are fixed, this hasn't presented much of a problem for me. Generally, it seems that the defects which the hack is meant to fix gets resolved and this makes the hack redundant anyway. Microsoft are also pretty good about not fixing their defects too. I wouldn't expect the underscore hack to stop working in IE6 any day soon.

About Roger Keays

Roger Keays is an artist, an engineer, and a student of life. He has no fixed address and has left footprints on 40-something different countries around the world. Roger is addicted to surfing. His other interests are music, psychology, languages, the proper use of semicolons, and finding good food.