首页 > 代码库 > IE6双边距bug及其解决办法
IE6双边距bug及其解决办法
<!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><style type="text/css">body,div{ margin:0; padding:0;}#div1{ width:200px; height:200px; background:#900; margin:20px 0 0 20px; float:left;}#div2{ width:300px; height:200px; background:#009; margin:20px 0 0 20px; float:left;}</style></head><body><div id="div1"></div><div id="div2"></div></body></html>
上面这段代码，在IE6和FF中的显示结果分别如下图所示:
可以看到，在IE6中显示的红色区域的左边距实际为40px，是CSS代码中设置的20px的两倍，这是IE6的双边距BUG。当满足下面这三个条件时，就会出现这个BUG：
1、要为块状元素；
2、要左侧浮动；
3、要有左外边距（margin-left）。
出现双边距的条件是当浮动元素的浮动方向和margin的方向一致时才会出现。也就是说，并不是只有块状元素左浮动，且具有左外边距时才有这个 BUG，当一个盒子右浮动的同时有一个向右的margin-right的时候，IE6也会把margin-right解析为原来的2倍。当有多个同行元素 都浮动了，而且都有同方向的margin，则只有最靠近浮动方向的元素有双边距bug。
解决这个bug有两个方法：
1.给float的元素添加一个display：inline
2.给ie6写一个hack，其值是正常值的一半，即_margin-right:10px;这个方法不推荐，因为要加hack写法，而这个是要尽量避免写的。但是这个正好能够说明这个bug的真实存在。
IE6双边距bug及其解决办法
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。