导航菜单 - 不适用于 IE答案

【问题标题】：Navigation Menu - Not working on IE导航菜单 - 不适用于 IE
【发布时间】：2011-06-27 19:21:06
【问题描述】：

我设计了一个导航菜单，它在 Chrome 和 Firefox 上运行良好，但在 IE7 和 IE8 上似乎无法正常运行。如何解决这个问题？

注意：它不是下拉功能。

<div class="nav-block">
                <ul id="nav">
                <li><a class="active" href="/">Home</a></li>

                <li>
                <a href="/">Category</a>
                  <ul class='subnav'> 
                   <li><a href='#'>One</a></li>
                   <li><a href='#'>One</a></li>
                   <li><a href='#'>One</a></li>
                  </ul>
                </li>
                <li>
                <a href="/">Accounts</a>
                  <ul class='subnav'> 
                   <li><a href='#'>One</a></li>
                   <li><a href='#'>One</a></li>
                   <li><a href='#'>One</a></li>
                  </ul>
                </li>
                <li><a href="/">Logout</a></li>
            </ul>
</div>

CSS：

<style>
.nav-block{
    background-color:black;
    height: 45px;
}

#nav {
    padding:12px;
    list-style:none;
}

#nav li{
    display:inline;
    margin:0 1px 0 -1px;
    padding:3px 15px;
    float:left;
    font-size:14px;
}

#nav a {
    background-color:white;
    color:#C51721;
    padding:10px;
    text-decoration: none;
}

#nav .subnav {
    padding:0px;
    list-style:none;
    width:130px;
    border-right: 2px solid black;
    border-bottom: 2px solid black;
    border-left: 2px solid black;
    color:#000000;
    margin-top:9px;
    margin-left:-2px;
    background-color:white;
}

#nav .subnav li {
    padding:0px;
    float: none;
    width:100px;
    color:#000000;
}

#nav .subnav li a {
    padding:3px;
    padding-left:10px;
    display:block;
    background-color:white;
    color:#C51721;
    text-decoration: none;
    border-bottom:1px solid #DEDEDE;
}
 </style>

如果代码可以改进，请告诉我。谢谢

【问题讨论】：

请描述 “在 IE7 和 IE8 上似乎无法正常工作” 应该是什么意思。你在看什么？你应该看到什么？
.subnav 中 li 的高度很大。它应该与 Firefox 和 Chrome 的大小相同。

标签： html css navigation menubar

【解决方案1】：

.subnav 中 li 的高度大。它应该与 Firefox 和 Chrome 大小相同

I test it 时，我有相反的问题：IE7 太小了。

似乎是因为li上的一些边距。为了让它们都具有相同的高度，我使用了：

#nav .subnav li {
    padding:0px;
    float: none;
    width:100px;
    color:#000000;
    margin:0px;
}

主要问题是您有一个内联元素 (<li>)，其中嵌套了一个块元素 (<a>)。

您应该通过将 <li> 更改为块元素来修复它。但是，您将遇到其他问题，因为您 <a> 不会占用所有宽度...

#nav .subnav li {
    padding:0px;
    float: none;
    color:#000000;
    display:block;
    width:130px;
}

这应该让你接近你想要的。

【讨论】：

感谢@Kraz，解决了一个问题。它现在似乎可以在 IE 8、Firefox 和 Chrome 上运行。在 IE7 上 - LI 的高度太小，如何解决这个问题？我找不到办法..
我会尝试为<li> 定义边距、行高或高度。或者扩展你的<a>，列表项应该跟在后面。见this updated jsfiddle。

【解决方案2】：

确保您通过 DOCTYPE 标记声明您正在编码的 HTML 版本。这将确保没有浏览器在怪异模式下运行，这可能会改变您网站的呈现方式（也就是这可能会使您的网站显示怪异）。

另外，如果您还没有这样做，请考虑使用 CSS 重置来帮助减少浏览器不一致。尝试重置 Eric Meyer：http://meyerweb.com/eric/tools/css/reset/

【讨论】：