什麼導致我的CSS以這種方式表現？

Question

我有一個簡單的導航下面的HTML：

<header> 
    <div class="login"> 
     <ul> 
      <li><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
     </ul> 
    </div> 
</header> 

我有以下的CSS：

header { 
    height: 145px; 
    border: 1px solid #f00; 
} 

.login { 
    float: right; 
} 

.login ul { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 

.login li { 
    display: inline; 
} 

.login li a { 
    color: #fff; 
    background-color: #666; 
    padding: 5px 10px; 
} 

我使用HTML5樣板，所以我的標題被顯示爲塊元件。當我在現代瀏覽器中查看頁面的搜索結果的樣子：

爲什麼錨填充延長紅色邊框/頭元素之外？什麼導致了這種行爲？

此外，當我在IE兼容性視圖中查看同一頁上，它現在看起來像：

這好像填充完全不施加或通過內含div切斷。我嘗試爲div設置高度，但結果仍然相同。什麼導致了這種行爲？

感謝

Answer 1

嘗試把顯示：塊的.login李一，把一個float：留在的.login李

您也可以縮短你的代碼，並採取了不必要的div，並把這個類放在ul上。

HTML：

<header> 
    <ul class="login"> 
     <li><a href="#">Link</a></li> 
     <li><a href="#">Link</a></li> 
    </ul> 
</header> 

CSS：

header { 
    height: 145px; 
    border: 1px solid #f00; 
} 

.login { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    float:right; 
} 

.login li { 
    float:left; 
} 

.login li a { 
    color: #fff; 
    background-color: #666; 
    padding: 5px 10px; 
    display:block; 
} 

http://jsfiddle.net/KPzUv/

Answer 2

你們看到的是身體保證金或填充。將邊距設置爲零，它應該消失。這也可能是由於標題和正文之間的「邊距崩潰」導致的後續問題導致後續元素的填充漏過但我沒有時間現在檢查。