IE浮动边界BUG扩展探讨

熟悉CSS盒子模型的朋友相信，IE双浮动边界BUG不会陌生(如果不是很清楚，可以点击)，而且这个BUG只会在浮动行的第一个浮动元素中生成，所以如果第一个浮动元素没有使用外补丁边距，就不会有双距离。然而最近发现IE扩展了BUG。在下面的示例中，所有图形的浮动行的第一个浮动元素之外的补丁是0#left2，左边距是50px，这表示正常。

当#left2的左边距为100px时，显示正常。

然后我们把#left2的左边距增加到150px，刚开始有点奇怪。

我们将#left1的宽度改为110px，而#left2的左边距保持150px 。

看到上面的现象，我们发现IE真的很有性格。这个性格男人怎么算的？其实不难发现，当#left2的左边距小于或等于#left2的宽度时，显示正常，但一旦变大，就会出现问题。实际上，#left2的左边缘之间的距离等于# left1。宽度(#左侧2。左边距-# left1。宽度)* 2。解决这个BUG其实很简单。就像双距离解一样，# left2。总结的关键是为什么我刚才说是BUG的扩展，因为双BUG和这个错误算法的BUG都只会出现一次。也许你不明白，所以这样说：1。如果#left1的左边距大于0，那么#left1的左边界会有双倍距离的BUG，而后面的#left2的左边距即使大于#left1的宽度也不会出错；2.如果left1的左边距等于0，#left2的左边距大于#left1的宽度，那么#left2的左边界就有一个错误算法的BUG，然后就是#left3，即使#left3的左边距大于#left2的宽度，也不会出现错误。3.如果left1和left2的左边距都等于0，那么就有一个#left3，而#left3的左边距大于(left1和#left2的宽度之和)，那么在#left3的左边界就会出现一个错误算法BUG。它的实际左边界是(# left1)。横向左侧2。宽度)(#left3。左边距-# left1。宽度-左侧2。宽度)* 2，那么# left3后面的所有浮动元素都不会出错；以上都以左侧为例，但右侧是一样的。