IE双倍浮动边界BUG现象

请看以下小段代码：

.floatbox {

float: left;

width: 150px;

height:150px;

margin: 5px 0 5px 100px;

/*This lastvalue applies the 100px left margin */

}

 

相信你的脑海里浮现出这样的蓝图：

可残酷的现实告诉你，理论通常是空中楼阁，实践才是检验真理的唯一标准啊！

 

现实已经摆在我们面前，要做的就是冷静分析：

实际上，这个Bug仅当浮动边界和浮动元素的方向相同时出现在浮动元素和容器盒的内边缘之间，在这之后的任意有着相似边界的浮动元素不会呈现双倍边界。只有特定的浮动行的第一个浮动元素会遭遇这个Bug。像居左的情况一样，双倍边界同样神秘地显示在居右的相同方式。

英文原址：http://www.positioniseverything.net/explorer/doubled-margin.html

 

问题解决了，我们是不是可以欢呼雀跃一下了，可是，事情真的就这样结束了吗？？

让我们再瞧瞧以下几张趣图：

 

不知聪明的你是否从图中的信息找出线索了？

实际上情况是这样的：

 

红色边距 = floatBox_1 . width + (floatBox_2 .margin-left - floatBox_1 . width) * 2

 

总结
关键是刚才我为什么说它是BUG的延伸呢，因为无论是双倍BUG还是这个错误算法的BUG都只会出现一次。即# floatBox_1的margin-left 非0，则bug传到# floatBox_2（如果# floatBox_2存在），如果# floatBox_2的margin-left 亦非0，则传至# floatBox_3 。。。 你懂的，条件满足，就一直传递下去。。。

 

详解见下（已明白者可忽略）：

1.如果# floatBox_1的margin-left大于0的话，那么#floatBox_1左边界就产生了双倍距离的BUG，而后面的# floatBox_2的margin-left即便大于#floatBox_1的宽度也不会出错了；

 

2.如果floatBox_1的margin-left等于0，#floatBox_2的margin-left大与#floatBox_1的宽度，那么#floatBox_2左边界出现错误算法的BUG，之后还有个#floatBox_3，即便是#floatBox_3的margin-left大与#floatBox_2的宽度也不会出错；

 

3.如果floatBox_1和floatBox_2的margin-left都等于0，之后还有个#floatBox_3，而#floatBox_3的margin-left大于（#floatBox_1和#floatBox_2的宽度之和），那么#floatBox_3左边界就出现错误算法BUG，它的实际左边界为(#floatBox_1.width+floatBox_2.width)+(#floatBox_3.margin-left-#floatBox_1.width-floatBox_2.width)*2，然后#floatBox_3后面的所有浮动元素都不会出错；

 

注意：上面都是以左边为例，右边情况一样！