html - ie8 中的菜单项重叠

Question

您好 – 由于某种原因，我的网站上的 2 个菜单项在 ie8 中重叠(请参见下面的屏幕截图 – “关于我们”和“新闻”项以及这两个项之间的背景为白色)http://goo.gl/34oQ8 - 知道为什么吗？

CSS 代码

#nav
{
        right:2%;
        list-style:none;
        position:fixed;
        /* float:right; */
        top:30px;
        z-index:1000;
        /* width:520px; */
}

#nav > li {
    display: inline-block;
    /* dirty hack for IE7 */
    *display: inline;
    *zoom: 1;
}

#nav a
{
        font:12px 'Open Sans', "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
        font-weight:600;
        letter-spacing:1px;
        float:left;
        top:30px;
        display:inline-block;
        font-size:11px;
        margin-left:5px;
        margin-right:5px;
        padding-left:15px;
        padding-right:15px;
        text-decoration:none;
        height:24px;
        color:#666;
        line-height:24px;
        text-align:center;
        box-shadow:1px 1px 2px rgba(0,0,0,0.2);
        /* background:rgba(255,255,255,0.9);  removed not ie8 compatible */
        text-transform:uppercase;
        background: white;
    opacity: 0.8;
    filter: Alpha(opacity='80');
}

#nav a:hover
{
        background:#dedede;
}

#nav .current a
{
        background:#666;
        color:#ededed;
}

HTML代码

    <ul id="nav">
  <li class="current"><a href="#presentation">Home</a></li>
  <li><a href="#equipe">Team</a></li>
  <li><a href="#plan-activite">About us</a></li>
  <li><a href="#medias">Press</a></li>
  <li><a href="#inline" class="modalbox">Contact</a></li>
</ul>

Answer 1

我不认为 <a> 有 margin 元素将分隔您的 <li>这就是你想要的。尝试将 margin-left 和/或 margin-right 添加到 nav li相反

另外，HTML5 包含一个 <nav>可以很好地替换您的 id="nav"

的标签