关于IE6浮动产生的3像素BUG

关于IE6的浮动产生的3像素BUG

 

　　以前写前端代码时，IE下总是会出现各种莫名其妙的问题，如一行两列布局在其他浏览器下正常，但是在IE下确发现两列出现了上下错位。今天将IE下的3像素问题做个总结，后续遇到问题再更新。

　　1、bug描述

　　IE下两个相邻的div之间会出现3个像素的bug，这个bug是在当对其中一个div使用了float，而另外一个没有使用时会出现。

left

right

　　

<div style="margin: 0 auto; background-color: #ccc;">
    <div style="width: 200px; height: 100px; float: left; background-color: #95f49e;">left</div>
    <div style="background-color: #fff; height: 100px; border: 1px solid #ccc;">right</div>
</div>

　　上面的代码在IE6低下运行时，会发现right前面出现3px的空格。

　　解决方法：a.对另一个元素同时使用float； b.为已经浮动的div添加一条语句：margin-right:-3px; ；

　　当浮动元素与非浮动元素相邻时，这个3像素的Bug就会出现，它会偏移3像素。只要触发IE的hasLayout，非浮动元素就会拥有布局。所以，利用IE6特有的hack规则，为它单独写样式就可修复此问题：_zoom:1;margin-left:0;_margin-left:-3px;zoom 是IE触发Layout条件之一，因为它是IE特有的CSS规则，所以采用zoom。margin-left:-3px 是修复IE6 中3px 的bug。此前采用非浮动元素也浮动的方法修复bug，现在可以试试这个新的方法了！注：前面的下划线是专门写给IE7以下版本的hack！