导航菜单 - 不适用于 IE

Question

我设计了一个导航菜单，它在 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>

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

Answer 1

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

当我测试它时，我遇到了相反的问题：IE7也是如此小的。

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

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

主要问题是您有一个内联元素（

），其中嵌套了一个块元素（; ）。

您应该通过将

更改为块元素来修复它。但是，您会遇到其他问题，因为您 不会占用所有宽度...

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

这应该会让您接近您想要的。

Answer 2

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

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