为什么我的 css 在 IE 中渲染错误？

发布于 2024-07-13 03:46:13 字数 111 浏览 6 评论 0原文

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

我恋#小黄人 2024-07-20 03:46:13

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

要解决此问题，请将所有链接浮动到左侧（这实际上会将它们变成块元素）。您需要在其他地方调整标记才能使其正常工作（如果您直接浮动，可能会遇到一些清除问题），但这应该可以解决特定的 IE 问题。

编辑更多细节：

如上所述，内联元素上的垂直内边距的行为与您期望的方式不同（它增加了元素的高度，但因为内边距不与其他页面元素交互内联元素经常以奇怪的方式重叠）。因此，要解决此问题，您需要以某种方式使填充元素（标记）具有 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 清除其浮动内容。如果用户增大字体大小，这将允许父导航元素适当增大尺寸。

另外，我删除了间隔符 · 并建议在 CSS 中使用背景图像和 .last 类。这纯粹是个人喜好。（在理想的情况下，您可以使用 :after 伪类来注入 ·，但由于 IE 6 不支持它，您无法这样做并支持所有浏览器。）我推荐背景图像而不是仅仅将其保留在标记中的原因是，它可以使标记更清晰，并且更容易在以后进行更改（例如，如果您的客户决定他们想要一个管道而不是一个点）。

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

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

I assume you're talking about the top navigation; you're padding an inline element (the <a> tag). When placing padding on an inline element, horizontal padding will push against other elements, but vertical padding will just increase the size of the element without affecting the layout around it. Likely Firefox is rendering the boxes above the elements below them in the source, but for whatever reason IE is rendering them beneath, which is why you're seeing parts of the box disappear.

To fix the problem, float all of the links left (which essentially turns them into block elements). You'll need to adjust your markup elsewhere to make it work (likely have some clearing problems if you just float straightaway), but that should fix that specific IE issue.

Edited for more detail:

As mentioned above, vertical padding on an inline element doesn't behave the way you would expect (it increases the element's height, but because the padding doesn't interact with other page elements the inline element often overlaps things in odd ways). So to fix this, you somehow need to make the padded element (the <a> tag) have display: block. To keep everything on the same line, floating left is your best bet. Here's the markup and styling that I would use:

<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>

Some things to note: I'm using a standard clearfix (Google this if you don't know what I'm talking about) to make sure the UL clears its floated contents. This will allow the parent nav elements to grow in size appropriately if the user sizes up their font.

Also, I removed the spacer · and recommend using a background image and .last class in the CSS. This is purely personal preference. (In an ideal world, you'd use the :after pseudo-class to inject the ·, but thanks to IE 6 not supporting it you can't do that and support all browsers.) My reason for recommending a background image rather than just leaving it in the markup is that it leads to cleaner markup and is far easier to change down the road (if your client decided they wanted a pipe rather than a dot, say).

The logic behind this markup/styling is that you need padding on the <a> for the border/background color to work which means it has to have display: block. Adding that would stick every link on a different line, though, so you need to float either it or its parent. Since it's part of a list, it's easier to float the li parent and use a clearfix to make sure the ul still has some presence on the page.

Obviously if you use this code you'll need to remove most of the #nav_banner element things lower down in the stylesheet, and you'll likely need to debug cross-browser again. Even if you don't, hopefully it will provide you with some ideas for easily constructing top navigation in the future.

回复收藏 0 原文