試圖找出為什么這些浮動LI在IE7中不對齊

Question

這是相關頁面：[已編輯]

該菜單在Firefox，Safari，Chrome和IE8 +中看起來很棒。 但是在IE7中，LI垂直堆疊。 如果尚未安裝IETester，請下載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包裝器。 另外，別忘了在列表末尾清除浮點數。