以前寫前端代碼時，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: value;_margin-left: value-3px;zoom 是IE觸發Layout條件之一，因為它是IE特有的CSS規則，所以采用zoom。margin-left: value-3px 是修復IE6 中3px 的bug。此前采用非浮動元素也浮動的方法修復bug，現在可以試試這個新的方法了！注：前面的下划線是專門寫給IE7以下版本的hack！