Serving Two Font Sizes

One practical application of this bug involves supplying IE5.5/Win with its own font size. IE5.5/Win has a problem rendering font sizes smaller than 1em or less than 100%. For instance, the size of the text may be specified to be 90% of the main text. However, IE still displays that size way too large. To counteract this font-size is first set to 75% and then is reset to 90%, the latter using the commented value to hide it from IE5.5/Win. A hypothetical

#footer
{
	/* other properties may be declared anywhere in this rule */
	font-size: 75%;
	font-size: /**/90%;
}

With this CSS IE, Opera, and Mozilla will display the text in approximately the same size. Note that the commented CSS declaration must be placed after the declaration targetting IE for other browsers to apply the correct font size.

Workaround for Faulty Box Model Implementation

Another application, a more important one at that, is to use commented value declarations to hide width values from IE5.5/Win. Recall that IE5.x/Win incorrectly implements the CSS box model, equating width as content width plus left and right padding values, plus left and right borders. In contrast, the specs says width refers only to the content width exclusive of padding and border.

Therefore, whenever width, padding, and border values are specified for a block element IE will incorrectly render them unless it is given its own set of values to compensate for this bug.

One way of furnishing IE5.5/Win with its own value is to use the Tantek Çelik Hack. Another is to use the Simplified Box Model Hack (SBMH) which employs the CSS escape character (backslash) to hide declarations from IE.

Another way to work around the box model dilemma of IE5.5/Win is to place a comment before the width value. An example is given below.

div
{
	padding-left: 5%;
	padding-right: 5%;
	width: 100%;        /* This value for IE5.5/Win */
	width: /**/90%;     /* This value for other browsers */
}
	

When IE5.5/Win encounters this rule it will give div a left and right padding of 5% and a content width of only 90% (100% minus 5% minus 5%). IE5.5/Win will then skip over the last declaration since it cannot read it.

Other browsers on the other hand will apply the padding, read both width values but apply only the second value (90%) because it overrides the preceding one.