完美解决IE6中双边距BUG问题

一，什么是双边距BUG

例如：我们要让绿色盒模型在蓝色盒模型之内向左浮动，并且距蓝色盒模型左侧100像素。这个例子很常见，比如在网页布局中，侧边栏靠左侧内容栏浮动，并且要留出内容栏的宽度：

1.png

要实现这样的效果，我们给绿色盒模型应用以下CSS属性：

.floatbox {
 float: left; 
width: 150px;
 height: 150px;
 margin: 5px 0 5px 100px;
//外边距的最后一个值保证了100px的距离
 }

看起来很简单，但是当我们在IE6查看时，却会发现左边距的100px， 被扩展到了200px！如下：

2.png

二，为什么会这样？

出现双边距的条件是当浮动元素的浮动方向和margin的方向一致时才会出现。也就是说，并不是只有块状元素左浮动，且具有左外边距时才有这个BUG，当一个盒子右浮动的同时有一个向右的margin-right的时候，IE6也会把margin-right解析为原来的2倍。当有多个同行元素都浮动了，而且都有同方向的margin，则只有最靠近浮动方向的元素有双边距bug。

三，如何解决？

很简单，只需要给浮动元素加上display:inline;这样的CSS属性就可以了。如下图

3.png

CSS代码如下：

.floatbox {
float: left; 
width: 150px;
height: 150px; 
margin: 5px 0 5px 100px;
display: inline;
 }

没错，就是这么简单啦~