Internet Explorer floating boundary Bug Extension Discussion _ Experience Exchange

Familiar with CSS box model friends believe that for IE double floating boundary bug is not unfamiliar (if you are not very clear to click), this bug will only produce the first floating element in the floating row, so if the first floating element does not use the outer patch margin there will be no double distance. However, recently found that IE for this bug is actually an extension of the phenomenon.

Problem
The following example is the first floating element outer patch for all the floating rows of the graph margin 0

#left2的margin-left to 50px display normal

When the margin-left of the #left2 is 100px display normal

And then we're going to increase the #left2 's margin-left to 150px, which is a little weird at first.

We changed the width of the #left1 to 110px, while the margin-left of #left2 continued to remain 150px.

See above phenomenon, we found IE really have character Ah, in the end this character is how to calculate AH? In fact, careful observation is not difficult to find, when the #left2 margin-left is less than equal to the width of the #left display normal, but once the problem is greater than, it actually #left2 the left boundary distance equals #left1.width+ (#left2. Margin-left -#left1. Width) *2
Solve
To solve this bug is very simple, as with the double distance solution, the #left2 set {display:inline} is ok.
Summarize
The key is why I said it is an extension of the bug, because both the double bug and the bug of this error algorithm will only appear 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 behind the #left2 is not wrong even if it is greater than the width of the #left1;

2. If the left1 margin-left equals 0, #left2的margin the width of the-left and #left1, then the error in the left margin of the #left2, followed by a #left3, even The margin-left of left3 and the width of #left2 are not wrong;

3. If the margin-left of LEFT1 and left2 is equal to 0, then there is a #left3, and #left3 is greater than (#left1和 the sum of the width of the margin-left), then the error algorithm bug appears on the left edge of the #left2. Its actual left boundary is (#left1. Width+left2.width) + (#left3. margin-left-#left1. Width-left2.width) *2, and then all floating elements after #left3 are not faulted;

It's all on the left, for example, on the right.