A CSS Hack for Internet Explorer 8

Today I found a nifty little hack that appears so far to work for IE8 on STSoftware Support Forum.  It apparently has to do with the fact that IE8 ignores multiple id selectors.

I decided to test it out on the infamous fieldset – legend IE bug.  The display issue came to my attention not by IE, which had been fixed using the usual relative/absolute positioning fix. The “bug” reared its ugly head in Firefox 3.6, which now positions the legend absolutely from the top-right corner within the padding of the fieldset. This being the case, I had to make one of two choices:

1. Eliminate the fieldset padding
2. Eliminate the absolute/relative positioning built only for IE

I decided to go with option #2. However, to do this we had to preserve positioning one way in IE 6/7, and another way in IE8. This CSS ‘hack’ is actually more of an anti-hack. By that I mean, whatever styles are placed will affect all browsers except IE8. So let’s take a look at how this works.

Here are the original styles, that worked for FF < 3.6, but not IE 6/7/8:

FIELDSET {
    padding: 2.0em 0.5em;
    margin: 2.0em 0em;
    background-color: #CCCC99;
}

LEGEND {
    padding: 0.3em;
    margin: 0;
    background-color: #B0AA6F;
}

The Holly Hack does not work for IE8, so instead we must apply this "fix" to all elements:

FIELDSET {
    position: relative;
}

LEGEND {
    position: absolute;
    top: -14px;
    left: 10px;
}

And here is the hack that fixes all browsers except for IE8:

FIELDSET, #IE8#HACK {
    position: static;
}

LEGEND, #IE8#HACK {
    position: static;
    top: 0;
    left: 0;
}

This will effectively remove the positioning for all non-IE8 browsers. But beware - the ignoring of multiple ID selectors is an IE8 regression. This means the positioning will be incorrect again in IE6/7. So you will need to reposition with the Holly Hack for those browsers:

/* star hack for IE7 */
*+html FIELDSET {
    position: relative;
    margin-top: 3.8em;
}

*+html LEGEND {
    position: absolute;
    top: -14px;
    left: 0px;
}

/* star hack for IE6 */
*html FIELDSET {
    position: relative;
    margin-top: 3.8em;
}

*html LEGEND {
    position: absolute;
    top: -14px;
    left: 0px;
}

This is a less-than-ideal CSS declaration! However, until IE can play nice with the standards of other browsers, we web developers will have to twist and contort our coding to make due.

If you know of a simpler way to approach this issue, please share! I would like to know about your results.