Question

嗨 - 由于某种原因，我的网站上有两个菜单项重叠ie8（见下面的截图 - 项目“关于我们”和“按下”，背景在这两个项目之间的空白处是白色）在我的sitehttp：// goo.gl/34oQ8 - 知道为什么吗？

enter image description here

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>元素上留一个余量会使<li>的{{1}}空间化，这就是你想要的。尝试将margin-left和/或margin-right添加到nav li而不是

另外，HTML5包含一个<nav>标记，可以很好地替换你的id =“nav”

Answer 2

您需要将所有间距和填充元素移动到#nav＆gt;李。

#nav a中的代码应仅用于样式化链接项，其中LI可用于样式化菜单项本身。

#nav > li {
            display: inline-block;
            margin: 0 5px;
            padding: 3px 15px;
}

这会开始清理代码..

菜单项在ie8中重叠

2 个答案: