IE6在解析浮动: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; }

« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3