4

嗨——由于某种原因，我的 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>
4

2 回答 2

3

我不认为在<a>元素上设置边距会隔开<li>你想要的 's 。尝试添加 margin-left 和/或 margin-right 来nav li代替

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

于 2012-08-02T17:58:25.283 回答
0

您需要将所有间距和填充元素移动到 #nav > li 中。

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

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

这将开始稍微清理代码..

于 2012-08-02T18:40:54.487 回答