A long time, the common way of working around MSIE CSS bugs was to exploit parser bugs and missing features in it's CSS parser.

Recently I read about a cleaner approach; I tested it recently and it seems to work quite well. Judging from the W3C validator, it's compatible with XHTML, too. It's nor perfect, but it probably is the best we can do currently. (And definitely cleaner than the parser-bug-exploits listed before.)

The approach is simple: given the string <!--[if IE]> Foobar <![endif]--> in an HTML file, almost any parser will treat this as an comment. Except for Internet Exploiter, which will treat "Foobar" as if it was part of the regular text. Instead of "Foobar", you can load an override stylesheet to work around Internet Explorer bugs. Note that as a side effect, MSIE is not a standards compliant parser for XHTML. ;-)

Now for the drawbacks:

• The part hidden from every parser except IE is not validated by tools
• The converse construct (remove --), to hide stuff from IE only, is not valid XHTML
• The conditional needs to be in every HTML file, it's not in the CSS and not cached with the CSS, so sligthly less performant than other solutions.
• It doesn't nest, you can't use comments in this construct
• They are, after all, a hack

For comparison, a few of the older tricks in CSS:

body      { background-color: red; }
html>body { background-color: green; }

This is 100% valid CSS, and works because Internet Exploder doesn't support CSS 2 child selectors. But you cannot always use this, since you need to know the parent elements name. Note that this can give you trouble with the upcoming Internet Explorer which will likely have support for this selector, but will probably be "compatible" to some of the known MSIE 5/6 bugs.

body {
  voice-family: "\"}\""; /* some browsers have a parsing bug */
                         /* and will ignore the following rules */
  voice-family: inherit;
  background-color: green;
}

This abuses an attribute to confuse the CSS parser of some browsers. A real hack, strongly discouraged.

[category: /en/xml | Permalink]