IE8 - Container with margin-top: 10px has no margin

问题:

EDIT: This happens only in IE8, it works fine in IE7, Firefox, Opera etc

First of all, here is a picture I have made in photoshop to demonstrate my problem: http://richardknop.com/pict.jpg

Now you should have idea about my issue. Here is a simplified version of markup I'm using (I left out most irrelevant content):

<div class="left">     <div class="box">         // box content     </div>     <div class="box">         // box content     </div>     <div class="box">         // box content     </div> </div> <div class="right">     <div class="box">         // box content     </div>     <div class="box">         // box content     </div>     <div class="box">         // box content     </div> </div> <div class="clear"></div> <div class="box">     //     // NOW THIS BOX HAS NO TOP MARGIN     // </div> <div class="box">     // box content </div> 

And CSS styles go like this:

.clear {     clear: both; } .left {     float: left; } .right {     float: right; } .box {     overflow: auto;     margin-top: 10px; } 

Obviously I have left out all irreevant styles like borders, background colors and images, font sizes etc. I have kept only important stuff.

Any idea where could be the problem?

回答1:

See if padding-top: 10px works. It might be that the margin is trying to go from the top of the page.

回答2:

I think this is an IE8 bug. Relates to a sibling element of a floated left and right div. With or without a clearing div, the final unfloated element loses its top margin in IE8.

We've tested this, and only IE8 gets it wrong:

http://www.inventpartners.com/content/ie8_margin_top_bug

We also came up with 3 solutions.

回答3:

Try closing your clear div.

<div class="clear"></div> 

回答4:

I don't quite get this approach. You could wrap the <div>s with class right and left in another <div> and apply overflow: hidden, width: 100% to it so that the elements below floated elements will get displayed correctly.

回答5:

enter code hereTry using a container with a width with overflow:hidden around the floated divs, and remove the cleared div.

    <div id="container">         <div class="left">                 <div class="box">        // box content    </div>                 <div class="box">        // box content    </div>                 <div class="box">        // box content    </div>         </div>         <div class="right">                 <div class="box">        // box content right    </div>                 <div class="box">        // box content    </div>                 <div class="box">        // box content    </div>         </div>     </div>     <div class="box">    //    // NOW THIS BOX HAS NO TOP MARGIN    //</div> <div class="box">    // box content</div> 

And the CSS

#container { width: 100%; overflow: hidden; } 

(sorry, I left IE7 on my work machine for testing so I can't verify)

回答6:

I have similar problems, and the solutions provided by Matt Bradley did not work for me (but thanks for posting it anyway!). I wanted to have margin-top:10px on a h1 element.

The solution I came up with was by adding position:relative , top:10px and margin-top:0px to the h1 element.

回答7:

I don't have IE8 with me... but did you try adding clear: both to the bottom div and adding a bottom margin to one of the top floats? I'm pretty sure that would achieve the same effect without any extra divs.

文章来源: IE8 - Container with margin-top: 10px has no margin