IE下两个div之间出现3个像素的Bug

描述：IE下两个div之间会出现3个像素的Bug，这个bug是在当对一个div用了float元素时，而令一个div未使用时则会出现。
解决方法：a.对另一个元素同时使用float； b.为不浮动的div添加一条语句：margin-right:-3px; 或者margin-left:-3px; ；

   1:  #container {margin:0 auto; width:100%;}
   2:  #sidebar { float:left; width:200px; height:500px; background:#9c6;}
   3:  #sidebar2 { float:right; width:200px; height:500px; background:#9c6;}
   4:  #content { margin:0 205px ; _margin:0 202px; height:500px; background:#ffa;}

当浮动元素与非浮动元素相邻时，这个3像素的Bug就会出现，它会偏移3像素。只要触发IE的hasLayout，非浮动元素就会拥有布局。所以，利用 IE6特有的hack规则，为它单独写样式就可修复此问题： 

   1:  _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！

posted @ 2014-03-09 22:33  小路_同学  阅读(180)  评论(0)    收藏  举报