IE ‘three pixel bug’ hacked with float

Internet Explorer has a rendering bug called “Three pixel gap”.
Substantially, any box, also ones nested into another, that is next to a floated box gets a shrink of three pixel in the same direction of the float.

I’ve prepared an example to show this. The example document has a valid code for style and markup, then it works well with standard-compliant browser like Firefox. But try to open this page with Internet Explorer to see the bug in action.

This bug is known, and there’s already an hack for it. Here is a detailed description of both the bug and the hack.
The known hack consists into assign height:1% to the buggy box.
But this hack did not seem working to me, as you can see from the example source code: height:1% has no effect (I suppose it’s due to the fact that buggy boxes are contained into another, non-floated one - which the blue-bordered one in the example above).

So, I’ve prepared a different hack.

The trick is to declare floated the box containing the buggy boxes, and to fix its margin using !important flag.
Here you can see an example of the same page, hacked for Internet Explorer.
Please note: this hack works only with Internet Explorer (tested on v. 5.01 and above). It messes up things other browsers.

The code is really simple. Focusing on example shown above, div#container is the box with blue border. It’s not buggy itself, but it nests the buggy boxes. Here is its CSS code:

Of course, if you want to have a document that fits both IE and other browsers, you must have this code interpreted by I.E. only.

Via CSS, you can use “the star”. A CSS paragraph that follows * html runs only on IE.
Better, you can use conditional comments to put a link to your hacked stylesheet (as I do).