Floats, Margins and IE

原文地址：http://www.positioniseverything.net/explorer/floatIndent.html

bugs: IE4-6/Windows

1. Guide

　　The bug demonstrated here causes in-line elements (images, text) adjacent to a floated div to appear to be indented from their expected location. The indentation is caused by IE6's weird handling of margins on floated elements. The happy by-product is a cleaner way to defeat the doubled-margin bug.

 

2. Examples

<div class="box">
   <div class="sidebar"> a floated box with some content
   </div>
   some content
</div>

 

body{
   font-size: 100%;
   background-color: #ccddcc;
   color: #000;
   font-family: arial, helvetica, geneva, sans-serif;
   margin: 0 15%;
}

.box{
   clear: both;
   width: 80%;
   background: #fff url(images/75pxWide.png) no-repeat;
   color: #000;
   padding: 1em;
   border: 2px solid #EFCE8C;
}

.sidebar{
   float: right;
   width: 15em;
   font-size: 80%;
   border: 2px dotted #000;
   padding: 1em;
   margin-left: 75px;
   background-color: #f8eece;
   color: #000;
}

　　a. Double Float-Margin Bug

　　　　The standard layout should be:

　　　　

　　　　Here is a screen shot in IE6/Windows:

　　　　

　　　　This bug only occurs when the float margin goes in the same direction as the float and is trapped directly between the float and the inside edge of the container box. Any other left-margined floats that are displayed in the same row won't show the doubled margin. Only those floats that begin a new row will suffer from the bug. Also, the doubled margin displays mirror-symmetry, working the same way to the right as it does to the left.

　　b. The Fake Indent

　　　　That double-margin effect is plenty peculiar itself, but under some other conditions IE6 gets even weirder, applying the margin of a floated element, in full, at two different places on the page. Look at the following example:

　　　　

　　　　Here is a screen shot in IE6/Windows:

　　　　

　　　　You can see that he first line of the text is indented 75 pixels right. That 75 pixels comes from the 75 pixel left-margin of the sidebar div. Equally, the bug is symmetrical.

 

3. solution

　　The work around for this bug is preposterously simple, counter-intuitive and utterly in violation of the W3C recommendations—simply change the style of the floated element to "display: inline" and the problem disappears.　

<div class="box">
   <div class="sidebar" style="display: inline">content
   </div>
   content
</div>

　　{display: inline;} on a float should be no different than using {display: block;} (or no display value at all), and indeed all browsers follow this specification, including IE. But, this does somehow trigger IE to stop doubling the float's margin. Thus, this fix can be applied straight, without any fussy hiding methods.

　　In fact, you could just apply the Inline Fix to all floats if you like, since there are no known side-effects. That way the bug can never gain traction regardless of any margins you might or might not use. Of course if you do this, the bug can't happen and you get no chance to play the big CSS guru to your boss...