IE6 in resolution float: 3 pixel bug

In a typical float, as shown in the following picture: The gray rectangle is the outer container, the green container floats to the left in the outer container, and the floating part surrounds the float. However, when parsing such a float, IE6 adds a 3-pixel margin to the floating portion of the tightly floated part. To be more intuitive, let's make a comparison between Firefox and IE6 (above is the effect in Firefox, the following figure is the effect in IE6):

You will see clearly the 3 pixel margin bug in the IE6. To determine whether it's 3 pixels, I zoomed in Photoshop to 1600%, as shown in the screenshot below, which is 3 pixels.

How to solve this bug?

If the bug doesn't affect your layout, you can make it go with the wind. However, if the layout is affected or you can't tolerate a little flaw, just indent the right margin of the floating part by 3 pixels to the left, using hack only for IE.

1	* html .float{ margin-right: -3px; }