是什么导致我的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 li a 上放置一个显示：阻止，并在 .login li 上放置一个浮动：左侧

此外，您可以缩短代码并取出不必要的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

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