css - 是什么导致我的 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 样板，因此我的 header 显示为 block 元素。当我在现代浏览器中查看页面时，结果如下所示:

为什么 anchor 边距会延伸到红色边框/标题元素之外？是什么导致了这种行为？

此外，当我在 IE 兼容性 View 中查看同一页面时，它现在看起来像:

这里似乎根本没有应用填充或被包含的 div 切断。我尝试为 div 设置高度，但结果仍然相同。是什么导致了这种行为？

谢谢

Answer 1

尝试在 .login li a 上放置一个 display:block 并在 .login li

上放置一个 float:left

您也可以缩短代码并删除不必要的 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/