在开始的学习过程中，不清楚什么是双边距，通过上网查询，渐渐知道原形。概述为：若给一个浮动元素加上了同浮动方向一致的margin，则会在IE6上表现出双边距（在浮动方向的最边上会出现2*的margin）.用图可表示为：
高版本浏览器：
IE浏览器：
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
<style type="text/css">
.box{width:200px;height:300px;border:1px solid #ccc;}
.square{float:left;margin-left:10px;width:80px;height:100px;background:red;/*display:inline; 方案1*/} .s1{_margin-left:5px;} //方案2 </style></head><body> <div class="box"> <div class="square s1"></div> <div class="square s2"></div></div> </body> </html>
解决方案：
1.给浮动的元素添加display：inline属性；
2.给ie6加写一个hack，变浮动方向的最边上元素的margin为本身的一半(本例中即为_margin-left:5px)，不推荐使用。
时间： 2024-10-20 05:59:01