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的大小相同

当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;
}

这可以让你接近你想要的。

Answer 2

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

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

导航菜单 - 不在IE上工作

2 个答案: