Question

我正在开发一个网站，该网站的菜单在FF上运行正常，但在IE上却没有（就像我们一样）。
在IE上它向右浮动，而它应向左浮动，但是如果float设置为none，它几乎正确地表现，将其连接到容器的顶部。 Here's a live example.
这是css：

/* Navigation */
.navigation
{
    float: left;
    overflow: hidden;
    width: 650px;
}

.navigation ul
{
    list-style: none;
    margin: 8px 0 0 15px;
    overflow: hidden;
}

.navigation ul li
{
    border-right: 1px solid white;
    float: left;
    padding: 0 12px 0 12px;
}

.navigation ul li.last
{
    border: none;
}

.navigation ul li a
{
    color: white;
    font-size: 14px;
    text-decoration: none;
}

.navigation ul li a:hover
{
    text-decoration: underline;
}

.navigation ul li a.active
{
    font-weight: bold;
}

.btn_login
{
    float: right;
    margin: 4px 4px 0 0;
    display: inline;
    width: 200px;
}

这是html：

<div id="navigation_wrap">
            <div class="navigation">
                <ul>
                    <li><a class="active" href="default.asp">Home Page</a></li>
                    <li><a class="" href="faq.asp">FAQ</a></li><li><a class="" href="articles.asp">Articles</a></li>
                    <li><a class="" href="products.asp">Packages &amp; Pricing</a></li>
                    <li><a class="" href="gp.asp?gpid=15">test1</a></li>
                    <li><a class=" last" href="gp.asp?gpid=17">test asher</a></li>
                </ul>
            </div>
            <div class="btn_login">
              ...
            </div>
</div>

我希望有人有个主意谢谢，
奥马尔。

编辑：
设置两个元素的宽度有点帮助，但它仍然没有正确定位。请参阅上面更新的css。

Answer 1

＆lt; -span class =“”top_nav_separator“”＆gt;在你的代码中，这可能是困扰IE的东西

Answer 2

您可以尝试降低徽标类的高度。它正悬在菜单上。

Answer 3

前一段时间我在IE中遇到了同样的问题。它不喜欢浮动div中的列表项。添加以下内容为我修复了它：

display: list-item;
list-style-position: inside;

菜单在IE上向右浮动，在FF中向左浮动

3 个答案: