Question

以下是相关页面：[编辑]

Firefox，Safari，Chrome和IE8 +中的菜单看起来很棒。但在IE7中，LI是垂直堆叠的。你可以下载IETester，如果你还没有它可以看到我的意思。

这是我的HTML：

<ul id="menu">
    <li class="you"><a href="">You</a></li>
    <li class="us"><a href="">Us</a></li>
    <li class="contact"><a href="">Contact</a></li>
    <li class="insurance"><a href="">Insurance</a></li>
    <li class="services"><a href="">Services</a></li>
    <li class="blog"><a href="">Blog</a></li>
</ul>

和相应的CSS：

#header #menu {
    position: absolute;
    bottom: 40px;
    right: 22px;
    float: right;
}

#menu,
#menu li {
    list-style-type: none;
    padding: 0;
    margin: 0;
}


#menu li {
    float: left;
}

#menu a {
    display: block;
    float: right;
    width: 76px;
    height: 25px;
    padding: 45px 0 5px 0;
    text-align: center;
    text-decoration: none;
    color: #555;
    font-size: 90%;
    border: 1px solid #fff;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

#menu .you a {
    background: url(img/icon_you.gif) center 9px no-repeat;
}

#menu .blog a {
    background: url(img/icon_blog.gif) center 9px no-repeat;
}

#menu .us a {
    background: url(img/icon_us.gif) center 9px no-repeat;
}

#menu .insurance a {
    background: url(img/icon_insurance.gif) center 9px no-repeat;
}

#menu .contact a {
    background: url(img/icon_contact.gif) center 9px no-repeat;
}

#menu .services a {
    background: url(img/icon_services.gif) center 9px no-repeat;
}

#menu a:hover {
    background-color: #f6f5f3;
    border: 1px solid #e5e2dd;
    color: #2871ad;
}

非常感谢任何见解。

Answer 1

为每个li元素定义宽度。

Answer 2

不要漂浮你的A - 标签。你已经浮动了LI包装器。此外，不要忘记清除列表末尾的花车。

试图找出为什么这些浮动的LI在IE7中不对齐

2 个答案: