Ie浏览器double margin bug 解决办法

原文地址：

http://www.positioniseverything.net/explorer/doubled-margin.html

用代码设置一个浮动容器floatbox浮动在主容器box的左边，设置floatbox的左边距margin-left让它距离box的左边有一段距离。

代码如下：

.floatbox{float:left;

width:150px;

height:150px;

margin:5px 0 5px 100px;

}

最后的一个100px设置了距离左边的margin，代码到现在为止很完美，但是在ie中打开时，ie却并不认为这样：

Ie 却加倍了margin-left的数字，成了上面这种情况。

注意：这个bug只有当浮动容器的margin和它浮动的方向一致时才会在这个浮动容器（floatbox）和主容器（box）的内边缘之间发生，所有跟在此后的有类似margin的浮动元素将不会再出现这种现象，只有一组浮动元素中的第一个受此bug的影响。而且，这个浮动bug对称分布，对右边的浮动同样如此。

解决办法：

在浮动容器中添加display:inline，如下：

.floatbox{float:left;

width:150px;

height:150px;

margin:5px 0 5px 100px;

display:inline;

}

Ok，开始看看吧～