CSS - Margin-top不能在一個選擇器上工作，但在兼容性模式下工作

Question

我正在製作一個網站，並將網站拆分爲通常的標題，maincontainer和footer div。 maincontainer包含3個額外的div，並且所有3個div（部分1,2,3）都有一個margin-top：與其關聯的5px命令。前兩個div（第1和第2部分）完美地工作，但第3個div（第3部分）完全不起作用。它只是粘在第二部分下面。但是，如果我轉到IE兼容模式，第三個div將下降CSS中指定的5px。

下面的代碼。 CSS：

#middlecontainer { 
width: 960px; 
height: auto; 
} 

.section1, .section2, .section3{ 
width: 960px; 
margin-top: 5px !important; 
} 

HTML：

<div id="middlecontainer"> 
<div class="section1"> 
<div class="promo1"> 
<h1>Celebrate the real flavour of Indian cuisine at Mela.</h1> 
<p>&nbs</p> 
<p>&nbsp</p> 
</div> 
<div class="promo2"> 
<img src="images/home-1.jpg" alt="Mela West End, London" /> 
</div> 
</div> 
<div class="section2"> 
<div class="promo3"> 
<img src="images/mela-limitless.gif" alt="Up to 50% off Mela Limitless" /> 
</div> 
<div class="promo4"> 
<img src="images/gift-vouchers.gif" alt="Mela's Gift Vouchers" /> 
</div> 
<div class="promo5"> 
<img src="images/food-1.jpg" alt="Mela Curries" /> 
</div> 
</div> 
<div class="section3"> 
<div class="promo6"> 
<img src="images/visit-redhill.gif" alt="Visit Mela Redhill in Surrey" /> 
</div> 
<div class="promo7"> 
<img src="images/recipe-of-the-month.jpg" alt="Mela's Recipe of the Month" /> 
</div> 
<div class="promo8"> 
<img src="images/cookery-class.gif" alt="Did you buy a cookery class" /> 
</div> 
</div> 
</div> 

如果需要，我可以提供對.promo div的CSS代碼，而是以自己的子元素我不認爲這將影響母公司的div 。

基思

編輯： 這裏是投入的jsfiddle的代碼，它似乎在這裏工作得很好，雖然，所以我完全，爲什麼它不會在我的瀏覽器工作難住了。 http://jsfiddle.net/8xpxH/4/

Answer 1

由於浮動您的促銷元素，父元素（.sectionX）的高度爲0.這會弄亂您的利潤率。

您需要清除浮動。最簡單的方法是設置overflow:auto，一切都很好。 （auto可能使（不必要的），出現滾動條可以是有問題的，所以如果你是肯定的，你的東西完全吻合，並不會有溢出的問題採取hidden代替。）

.section1, .section2, .section3{ 
    width: 960px; 
    margin-top: 5px; 
    overflow: hidden; 
}