It's not uncommon to see a few CSS hacks in a stylesheet, especially when it comes down to the Internet Explorer. These browsers can break your will in a matter of minutes, not that many of us should be designing for the likes of Internet Explorer 5 these days but we have run into the situation where a client has an older browser installed on the boss's computer and they simply refuse to update it. These are truly the worst of times.

We count our blessing each time a version of Internet Explorer fails to make a decent impression on the W3Schools Browser Stats list and you can bet we were throwing a party when the Mac version of IE dropped out. All of this aside, this article is dedicated to the many CSS hacks available.

Disclaimer: Hacks should be used as a last resort. Whenever possible, it is important to attempt to solve the issue without them. Replacing a bug with another bug is not a safe tactic and the risk is that the next browser update could throw something off leaving you with angry clients.

A few notes about the coding below. I am using #selector to represent any given style. This means it could be an id or a class selector with any name of your choice. I am also targeting the margin only to keep this simple. Keep in mind that the order in which the hack appears makes a big difference, typically it should appear directly after the non-hack style. Don't forget to comment your hacks for future use and for others who may need access to your code. It's just common courtesy.

Internet Explorer 5.0 Mac

/* Hide from IE Mac \*/
#selector {
 margin: 0 10px 0 5px;
 }
/* End hide */

Internet Explorer 5.5

#selector {
 margin/: 0 10px 0 5px; /* IE55 */
 }

Internet Explorer 6.0

* html #selector {
 margin: 0 10px 0 5px; /* IE6 */
 }
#selector {
 _margin: 0 10px 0 5px; /* IE6 */
 }

Internet Explorer 7.0

#selector {
 *margin: 0 10px 0 5px; /* IE7 */
 }

Internet Explorer Target Order

#selector {
 *margin: 0 10px 0 5px; /* IE7 */
 _margin: 0 10px 0 5px; /* IE6 */
 margin/: 0 10px 0 5px; /* IE55 */
 }

Opera 9.0 & Older

html:first-child #selector {
 margin: 0 10px 0 5px; /* OP9< */
 }

Google Chrome, Safari 3.1, Opera 9.5

body:nth-of-type(1) #selector {
 margin: 0 10px 0 5px; /* CH SFR31 OP95 */
 }

Firefox 1.5 & Newer

#selector, x:-moz-any-link, x:only-child {
 margin: 0 10px 0 5px; /* FF15> */
 }

Firefox 2 & Older

#selector, x:-moz-any-link {
 margin: 0 10px 0 5px; /* FF2< */
 }

Firefox 3

#selector, x:-moz-any-link, x:default {
 margin: 0 10px 0 5px; /* FF3 */
 }

Firefox All Releases

<#selector[id=selector] {
 margin: 0 10px 0 5px; /* FF+ */
 }
@-moz-document url-prefix() { #selector {
 margin: 0 10px 0 5px; /* FF+ */
 } }
*>#selector {
 margin: 0 10px 0 5px; /* FF+ GECKO */
 }