IE6双倍边距BUG

在IE6中，如果块元素设置float:left/right，并设置margin-left/right时，边距就会翻倍。

html代码如下：

<div class="out">
<div class="in"></div>
<div style="clear:both"></div>
</div>

CSS代码如下：

.out {border:1px solid #0cf; width:300px;}
.in { width:200px;
      height:100px;
      border:1px solid #000;
      margin:10px;
      float:left}

浏览器输出结果：

firefox,Ie7,8,9显示效果

IE6下显示效果（边距翻倍了）

解决方法：添加display:inline；属性（推荐！）。或者使用_margin-left/right:5px(正常值的一半,目前只有IE6能解析)，即可解决。

更改后CSS代码如下：

.out {border:1px solid #0cf; width:300px;}
.in {
    width:200px;
    height:100px;
    border:1px solid #000;
    margin:10px;
    float:left;
    display:inline}

值得注意的是使用margin-top/margin-bottom不会出现问题。