IEBug之双边距bug

  1、什么是双边距Bug？

先来看图：

咱们要让绿色盒模型在蓝色盒模型以内向左浮动，而且距蓝色盒模型左侧100像素。

这个例子很常见，好比在网页布局中，侧边栏靠左侧内容栏浮动，而且要留出内容栏的宽度。要实现这样的效果，咱们给绿色盒模型应用如下CSS属性：

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

当在IE6中查看时，会发现左侧外边距100像素，被扩大到200个像素。以下图：

2、双边距Bug的缘由？

这个缘由还真是不清楚，但这样的结果确确实实在IE6中出现了。并且这种状况是在浮动元素的浮动方向和浮动边界的方向一致时才会出现。如同上面的例子同样，元素向左浮动而且设置了左侧的外边距出现了这样的双边距bug。同理，元素向右浮动而且设置右边距也会出现一样的状况。同一行若是有多个浮动元素，第一个浮动元素会出现这个双边距bug，其它的浮动元素则不会。

3、如何修正此Bug？

给浮动元素加上display:inline。以下图：

CSS代码以下：

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