0

您会注意到 testing.ksischool.com 站点的主导航区域（徽标下方的灰色条）中链接的 :hover CSS 在 Firefox 中运行良好，但 IE7 会去掉底部的几个填充像素。为什么？

4

2 回答 2

8

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

要解决此问题，请将所有链接向左浮动（本质上将它们变成块元素）。您需要在其他地方调整您的标记以使其正常工作（如果您只是直接浮动，可能会遇到一些清除问题），但这应该可以解决特定的 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（如果您不知道我在说什么，请使用 Google）来确保 UL 清除其浮动内容。如果用户放大他们的字体，这将允许父导航元素的大小适当地增长。

此外，我删除了分隔符并建议在 CSS 中&middot;使用背景图像和类。.last这纯粹是个人喜好。（在理想情况下，您会使用 :after 伪类来注入&middot;.将它留在标记中是因为它会导致更清晰的标记并且更容易改变（如果您的客户决定他们想要一个管道而不是一个点，比如说）。

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

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

于 2009-02-07T06:26:55.163 回答
0

尝试将 display: inline-block 添加到 a 元素。我不确定它的兼容性如何，但它适用于 IE7 和 FF。

编辑：One Crayon 的解决方案肯定更好，也是更常见的方法。

于 2009-02-07T06:20:21.120 回答