什么导致我的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

你们看到的是身体保证金或填充。将边距设置为零，它应该消失。这也可能是由于标题和正文之间的“边距崩溃”导致的后续问题导致后续元素的填充漏过但我没有时间现在检查。