日期:2013-11-21 浏览次数:20948 次
描述:IE下两个div之间会出现3个像素的Bug,这个bug是在当对一个div用了float元素时,而令一个div未使用时则会出现。
处理方法:a.对另一个元素同时使用float; b.为不浮动的div添加一条语句:margin-right:-3px; 或者margin-left:-3px; ;
#container {margin:0 auto; width:100%;}
#sidebar { float:left; width:200px; height:500px; background:#9c6;}
#sidebar2 { float:right; width:200px; height:500px; background:#9c6;}
#content { margin:0 205px ; _margin:0 202px; height:500px; background:#ffa;}
当浮动元素与非浮动元素相邻时,这个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!