CSS中IE6下双边距BUG解决方案

其实这个问题在刚学习CSS的时候就知道怎样解决了，但是一直不知道为什么会出现这种现象，今天顺便记录一下。

1.为什么会出现双边距BUG？

<style type="text/css">
    body,div{padding: 0;margin: 0;}
    .box{border: 10px solid black;float: left;}
    .inner{width: 100px;height: 100px;background: red;float: left;margin: 0 100px;}
    .inner2{width: 100px;height: 100px;background: red;float: left;margin: 0 100px;}
    }       
</style>

<div class="box">
    <div class="inner"></div>
    <div class="inner2"></div>
</div>

如上述图片实际上我们在一个父亲div中嵌套了一个儿子div元素，给儿子div，儿子div在设置margin-left：100px的时候实际上在IE6中会出现200px的效果。这是因为块级对象默认的display属性值是block，当设置了浮动的同时，还设置了它的外边距就会出现这种情况。也许你会问：“为什么第二个儿子对象和第一个儿子对象之间就不存在双倍边距的BUG”？因为浮动都有其相对应的对象，只有相对于其父对象的浮动对象才会出现这样的问题。第一个儿子对象是相对父对象的，而第二个儿子对象是相对第一个儿子对象的，所以第二个儿子对象在设置后不会出现问题。另外在一些特殊布局中，可能需要组合使用display:block;和display:inline;才能达到预期效果。

2.解决方案

在第一个儿子对象div中设置display: inline

总结：这个现象仅仅出现在block元素中，而inline元素中不会出现这种现象，同时也不会出现上下边距的情况，如果实在不行也可以尝试使用HACK方式，但是不推荐这种方式(不利于后期的维护)，也不符合WEB标准。