Acceptable CSS hacks/fixes

Question

Is there a list of 'good' clean CSS hacks, which are certain to be future-proof?

For example, zoom:1 is safe, as long as it's only served to IE, and you remember it's there. The very common hack of using child selectors is not safe because IE7 supports them. Using height:1% just feels dirty (but that might just be me).

I know of ie7-js, so IE6 bugs don't worry me much. Also, I'm not looking for a religious debate, just sources.

---

Thanks for the replies - I've selected the one with best sources as answer.

Thanks also for the suggestions to use separate CSS files, or not to worry about it. I entirely agree with you, and for me, those are givens. But when faced with a layout problem, I want a safe fix that will minimise the risk that I'll have to revisit the problem in $IE or $FF + 1. Sorry I didn't make that clearer.

Answer 1

For the majority of IE bugs I think you're best off using conditional comments around a link to a browser specific stylesheet. It tends to keep things pretty neat and it's quite self documenting.

Answer 2

I prefer the global conditional comment technique described by Hiroki Chalfant;

I find it helpful to keep my IE-targeted rules side-by-side with my standards-targeted rules in a single valid stylesheet.

Answer 3

Nicole Sullivan (AKA Stubbornella) who works for the Yahoo Performance team suggested in The 7 Habits for Exceptional Perf that you should use the CSS underscore hack to patch up IE6 bugs because:

• Hacks should be few and far between.
• If you will only have 5-6 hacks (which is already plenty) then it would not make sense placing those in an external file and thereby separating it from its context.
• An extra file would lead to performance penalties (Yahoo Best Practices, Rule 1).

It should however be noted that this is not valid CSS.

Answer 4

I've used Peter-Paul Koch's "QuirksMode" website a lot for issues involving CSS and cross-browser compatibility. He tends to frown on browser-specific methods, but he does have a page on CSS Hacks.

Answer 5

Here's a good list of filters that are very stable:

/* Opera */
.dude:read-only { color: green; } 

/* IE6/IE7 */
@media, 
  { 
  .dude { color: silver;} 
  }

/* IE8  \0 */
@media all\0 
  { 
  .dude { color: brown; } 
  }

/* IE9 monochrome and \9 */
@media all and (monochrome: 0) 
  { 
  .dude { color: pink\9; } 
  }

/* Webkit */
* > /**/ .dude, x:-webkit-any-link { color:red; }
    /* 
    * > /**/ 
    /* hides from IE7; remove if unneeded */


/* Firefox */
@-moz-document url-prefix() 
  { 
  .dude { color: green; }
  }

Answer 6

This article is a good summary of CSS hacks: http://www.webdevout.net/css-hacks