IE的坏脾气——3像素Bug

在一个典型的浮动中，如下面的图片所示：灰色矩形是外部容器，绿色容器在外部容器内向左浮动，未浮动的部分包围着浮动部分。但是IE6在解析这样的浮动时，会莫名的给靠紧浮动部分的未浮动部分添加3个像素的边距。为了更加直观，让我们将Firefox和IE6中的效果做一对比（上图是Firefox中的效果，下图是IE6中的效果）：





你会清晰的观察到IE6中的3像素边距Bug。为了确定到底是不是3个像素，我在Photoshop将图片放大到1600%，如下面的截图所示，的确是3个像素。



如何解决这个Bug？

如果这个Bug不影响你的布局，你完全可以让它随风而去。但是，如果影响了布局或者你不能容忍一点点瑕疵的话，只需要将浮动部分的右边距向左缩进3个像素，使用只针对IE的hack。

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