css - 为什么我的 CSS 在 IE 中呈现错误？

Question

您会注意到站点 testing.ksischool.com 的主导航区域( Logo 下方的灰色条)中的链接的 :hover CSS 在 Firefox 中工作正常，但 IE7 砍掉了底部的几个填充像素。为什么？

Answer 1

我假设您在谈论顶部导航；你正在填充一个内联元素(<a> 标签)。当在内联元素上放置 padding 时，水平 padding 会插入其他元素，但垂直 padding 只会增加元素的大小而不会影响它周围的布局。可能 Firefox 在源代码中将框呈现在它们下方的元素上方，但无论出于何种原因，IE 将它们呈现在下方，这就是为什么您会看到部分框消失的原因。

要解决此问题，请将所有链接向左浮动(这实际上将它们变成了 block 元素)。您需要在别处调整您的标记以使其工作(如果您只是直接 float ，可能会出现一些清除问题)，但这应该可以解决特定的 IE 问题。

---

编辑更多细节:

如上所述，内联元素上的垂直内边距并不像您预期​​的那样表现(它增加了元素的高度，但由于内边距不与其他页面元素交互，内联元素经常以奇怪的方式重叠事物).因此，要解决此问题，您需要以某种方式使填充元素(<a> 标记)具有 display: block。 .为了让所有东西都在同一条线上，向左浮动是你最好的选择。这是我将使用的标记和样式:

<style type="text/css">
.mainnav {
    font-size: 1em;
    color: #999;
    list-style-type: none;
    /* zoom triggers hasLayout on IE, ignored by others
    Necessary for the clearfix */
    zoom: 1;
}

.mainnav:after {
    /* This lets the .mainnav auto-clear its floated contents */
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.mainnav li {
    float: left;
    margin: 0 2px;
    /* Place background (disc image) here w/ appropriate padding */
}

.mainnav li.last {
    background: none;
}

.mainnav a:link, .mainnav a:visited {
    display: block;
    color: #fff;
    text-decoration: none;
    padding: 1px 1px 2px;
    border: solid 1px transparent;
}

.mainnav a:hover {
    color: #fff;
    background: #999;
    text-decoration: none;
    padding: 1px 1px 2px;
    border: solid 1px #ccc;
}

.mainnav a.selected, .mainnav a.selected:hover {
    color: #B59B24;
    background: transparent;
    text-decoration: none;
}
</style>

<ul class="mainnav">
    <li><a href="/" class='selected'>Home</a></li>
    <li><a href="/About" >About</a></li>
    <li><a href="/Admissions" >Admissions</a></li>
    <li><a href="/Curriculum" >Curriculum</a></li>
    <li><a href="/Home/VacancyList" >Careers</a></li>
    <li class="last"><a href="/Contact" >Contact</a></li>
</ul>

需要注意的一些事项:我正在使用标准的 clearfix(如果您不知道我在说什么，请谷歌搜索)以确保 UL 清除其 float 内容。如果用户放大字体，这将允许父导航元素的大小适当增加。

此外，我删除了垫片 ·并推荐使用背景图片和 .last CSS 中的类。这纯粹是个人喜好。 (在理想情况下，您会使用 :after 伪类来注入(inject) · ，但由于 IE 6 不支持它，您不能这样做并支持所有浏览器。)我推荐背景图片的原因与其将它留在标记中，还不如将它留在标记中，这样可以使标记更清晰，并且更容易在以后进行更改(比如说，如果您的客户决定他们想要管道而不是点)。

此标记/样式背后的逻辑是您需要在 <a> 上填充要使边框/背景颜色起作用，这意味着它必须有 display: block .但是，添加它会将每个链接都放在不同的行上，因此您需要 float 它或它的父级。因为它是列表的一部分，所以 float li 更容易parent 并使用 clearfix 来确保 ul页面上仍有一些存在。

显然，如果您使用此代码，则需要删除大部分 #nav_banner element样式表中的内容较低，您可能需要再次调试跨浏览器。即使您不会，也希望它能为您提供一些想法，以便将来轻松构建顶部导航。