IE bilateral distance bug

 

1. What is a bilateral distance bug?

First look at the figure:

We need to move the Green Box Model to the left of the blue box model, and the left side is 100 pixels away from the blue box model. This example is very common. For example, in the webpage layout, the sidebar floats by the content bar on the left, and the width of the content bar needs to be set aside. To achieve this, we apply the following CSS attributes to the Green Box Model:

Reference content is as follows: . Floatbox { Float: left; Width: 150px; Height: 150px; Margin: 5px 0 5px 100px; /* The last value of the margin ensures the distance of 100 pixels */ }

Very simple, right? However, when we look at IE6, we will find that the left margin is 100 pixels, Which is expanded to 200 pixels. For example:

2. How can this happen?

To be honest, this is really unclear. However, this result is indeed in IE6. In addition, this condition occurs only when the floating direction of the floating element is the same as that of the floating boundary. As in the preceding example, a bilateral margin bug occurs when the elements float left and the left margin is set. Similarly, the elements float to the right and the right margin will also be set. If there are multiple floating elements in the same row, the first floating element will have this bilateral distance bug, and other floating elements will not.

3. How to fix this bug?

It's easy. You just need to add the display: inline; CSS attribute to the floating element. Is that simple? Yes, that's simple. For example:

CSSCodeAs follows:

Reference content is as follows: . Floatbox { Float: left; Width: 150px; Height: 150px; Margin: 5px 0 5px 100px; Display: inline; }