ie6兼容问题1—

ie6兼容问题1——双边距

在开始的学习过程中，不清楚什么是双边距，通过上网查询，渐渐知道原形。概述为：若给一个浮动元素加上了同浮动方向一致的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)，不推荐使用。