奇怪的保證金問題

Question

HTML：

<div id="outter"> 
    <div id="left"> 
     <div id="up"> 
      This is the up div 
     </div> 
     <div id="down"> 
      <h3>This is the down div</h3> 
     </div> 
    </div> 
</div> 

CSS：

#outter{ 
    height: 400px; 
    background: white; 
    border: 1px solid #bfd2e1; 
} 
#left{ 
    float: left; 
    margin-right: 0; 
    padding: 0; 
} 
#up{ 
    width: 355px; 
    height: 50px; 
    border: 1px solid #ffe59f; 
    padding: 12px; 
    line-height: 16pt; 
    margin: 15px 0 0 15px; 
} 
#down{ 
    float: left; 
    margin: 15px 0 0 15px; 
    width: 381px; 
} 
#down h3{ 
    border: 1px solid #bfd2e1; 
    background-color: #edf6fe; 
    padding: 10px; 
} 

的問題是，在Chrome/Firefox中，頁面看起來像：

但在IE6：

正如您所見，#down存在保證金問題。
小提琴：http://jsfiddle.net/wong2/dTEcs/1/
這怎麼會發生？

Answer 1

IE6 doubles margins on floated elements。

將display: inline添加到您的浮動元素（#down）。