Shulou(Shulou.com)06/02 Report--

What is the way to deal with margin double-margin Bug under IE6? I believe many inexperienced people are at a loss about it. Therefore, this paper summarizes the causes and solutions of the problem. Through this article, I hope you can solve this problem.

Are you familiar with the double-margin Bug problem of margin? here's how to deal with margin double-margin Bug under IE6.

The treatment method of margin double margin Bug under IE6

1. What is a bilateral Bug?

Let's look at the picture first:

We want the green box model to float to the left within the blue box model, 100 pixels to the left of the blue box model. This example is common, such as in a web layout, where the sidebar floats on the left side of the content bar and leaves the width of the content bar. To achieve this effect, we apply the following CSS attributes to the green box model:

The following is the referenced content:

.floatbox {float:left; width:150px; height:150px; margin:5px05px100px; / * outer margin * * A value that guarantees a distance of 100 pixels * /}

It's simple, but when we look at it in IE6, we see that the left margin is 100 pixels, which is enlarged to 200 pixels. As shown below:

Second, how did this happen?

To tell you the truth, the reason is really not clear. But the results do appear in IE6. And this happens only when the floating direction of the floating element is the same as the direction of the floating boundary. As in the example above, the element floats to the left and the outer margin on the left is set to have such a double margin bug. Similarly, the same thing happens when the element floats to the right and sets the right margin. If there are multiple floating elements in the same line, this double-spaced bug will appear for * * floating elements, but not for other floating elements.

Third, how to correct this Bug?

Quite simply, you only need to add a CSS attribute such as display:inline; to the floating element. It's that simple? Yeah, it's that simple. As shown below:

The CSS code is as follows:

The following is the referenced content:

.floatbox {float:left; width:150px; height:150px; margin:5px05px100px; display:inline;} after reading the above, have you mastered the method of dealing with double-margin Bug of margin under IE6? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.