Solution to double margin bug in IE browser

Original article address:

Http://www.positioniseverything.net/explorer/doubled-margin.html

Use the code to set a floating container floatbox to float on the left side of the main container box, and set the left side of the floatbox to margin-left to make it a distance from the left side of the box.

The Code is as follows::

. Floatbox {float: left;

Width: 150px;

Height: 150px;

Margin: 5px 0 5px 100px;

}

The last 100px is set to margin on the left. The code is perfect till now, but IE does not think this when it is opened in IE:

IE doubles the number of margin-left, which is the case above.

Note:: This bug occurs between the inner edge of the floating container (floatbox) and the main container (box) only when the margin of the floating container is consistent with its floating direction, all floating elements similar to margin afterwards will not be affected by this bug. Only the first one in a group of floating elements is affected by this bug. In addition, this floating bug is evenly distributed, as is the floating on the right.

Solution:

Add display: inline to the floating container as follows:

. Floatbox {float: left;

Width: 150px;

Height: 150px;

Margin: 5px 0 5px 100px;

Display: inline;

}

OK. Let's take a look ~