IE floating boundary Bug extension Discussion _ Experience Exchange

Familiar with CSS box model friends believe that for IE double floating boundary bug will not be unfamiliar (if you are not very clear can click), this bug will only produce in the floating line of the first floating element, so if the first floating element does not use the external patch margin will not double the distance. But recently found that the Internet Explorer for this bug actually has an extension phenomenon.

Problem
The following example, the first floating element of a floating line for all graphs, has a patch margin of 0

#left2的margin-left display normal for 50px

When #left2 's margin-left is 100px, it shows normal.

And then we're going to increase the #left2 margin-left to 150px, and it's starting to get a little weird.

We changed the width of #left1 to 110px, while #left2 's margin-left continued to maintain 150px

See the above phenomenon, we found that IE is really a character ah, in the end this character is how to calculate the man ah? In fact, careful observation is not difficult to find, when the #left2 margin-left is less than or equal to the width of #left display normal, but once greater than after the problem, it actually #left2 the left edge distance equals #left1.width+ (#left2. Margin-left -#left1. Width)
Solve
To solve this bug is very simple, as the double-distance resolution method, the #left2 setting {display:inline} is ok.
Summarize
The point is why I said it was an extension of the bug, because either the double bug or the bug in the error algorithm would only occur once. Perhaps you do not understand, then say:

1. If the margin-left of the #left1 is greater than 0, then the #left1 left edge creates a double-distance bug, and the margin-left of the #left2 behind it will not go wrong even if it is greater than the #left1 width;

2. If the left1 margin-left equals 0, #left2的margin the width of the-left and #left1, then there is a bug in the #left2 left border error algorithm, and then there is a #left3, even if # The width of the margin-left and #left2 of left3 will not go wrong;

3. If the margin-left of LEFT1 and left2 are equal to 0, then there is a #left3, and #left3 Margin-left is greater than (the sum of the width of the #left1和 #left2), then the #left3 left edge of the error algorithm bug, Its actual left border is (#left1. Width+left2.width) + (#left3. margin-left-#left1. Width-left2.width), and then all the floating elements behind the #left3 are not error-prone;

On the left, for example, on the right.

