Question

你会注意到：hover CSS用于网站测试的主要导航区域（标识下的灰色栏）中的链接.ksischool.com在Firefox中正常工作，但IE7会删除底部的几个填充像素。为什么呢？

Answer 1

我假设你在谈论顶级导航;你正在填充一个内联元素（<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中使用背景图片和.last类。这纯粹是个人偏好。（在一个理想的世界中，你会使用：after伪类来注入·，但是由于IE 6不支持它，你不能这样做并且支持所有的浏览器。）我推荐的理由是背景图像而不仅仅是将其留在标记中是因为它会导致更清晰的标记，并且更容易改变路径（如果您的客户决定他们想要管道而不是点，请说）。

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

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

Answer 2

尝试将display：inline-block添加到a元素。我不确定它是多么兼容，但它适用于IE7和FF。

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

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

2 个答案: