CSS Hacks: The Quick and Dirty Way to Patch your Stylesheets

It’s not uncommon to see a few CSS hacks in a stylesheet, especially when it comes down to the wonderful Internet Explorer 5.5 – 7.0. These browsers can break your will in a matter of minutes, not that many of us design for Internet Explorer 5.5 or 6.0 much these days but we have run into the situation where a client has one of these older versions installed on the boss’s computer and they simply refuse to update or switch. 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.

TARGET IE 5.0 MAC

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

TARGET IE 5.5

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

TARGET IE 6.0

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

TARGET IE 7.0

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

TARGET ORDER IE 5.5 / 6.0 / 7.0

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

TARGET OPERA 9.0 AND OLDER

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

TARGET GOOGLE CHROME, SAFARI 3.1, OPERA 9.5

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

TARGET FIREFOX 1.5 AND NEWER

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

TARGET FIREFOX 2 AND OLDER

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

TARGET FIREFOX 3

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

TARGET FIREFOX ALL VERSIONS

<#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 */
   }