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).