CSS: Cross-Browser Hacks

09.27.2011 07:13 by kbeckman | Comments

A couple weeks ago, I found myself neck-deep in some nasty rendering issues involving Internet Explorer. Finding hacks around IE’s rendering issues is nothing new for anyone who has written a single line of markup targeted for the web. This time was the first time though that I’ve had to dig so deep to get around IE. Below is a list of tricks that I used to overcome and support our poor corporate users constrained by late-adopter IT departments.

 

I’ve also included a few links for further reading. My favorite is a link from Cats Who Code that explains some nifty tricks for completely crashing IE6! Seriously, if you’re still using IE6, your corporate or personal technology strategy is WRONG.


IE7

Use either an asterisk [*] or a period [.] character within the normal style definition to trigger a style specific for IE7…

.some-style-definition {
    margin-left: -965px;
    *margin-left: -900px; /* IE7 */
}
.some-style-definition {
    margin-left: -965px;
    .margin-left: -900px; /* IE7 */
}

IE8

Wrap IE8 specific styles (or repeat a style definition that doesn’t work for IE8) inside a [@media \0screen] block…

@media \0screen { 
    ie8-specific-style {
        .margin-left: -965px; 
    }
}

 

IE9

Use the [:root] prefix with a [\9] terminator for IE9 specific styles…

:root .ie9-specific-style { margin-left: –965px\9; }

 

Firefox

…and in rare instances. Use a [@-moz-document url-prefix()] block for Firefox specific style definitions…

@-moz-document url-prefix() {
    firefox-specific-style {
        margin-left: -965px;
    { 
}

 

References