Question

我有一个菜单，在菜单下方有一个空白区域，这个空白区域只出现在IE6中。

屏幕截图：

IE6
enter image description here

Other browsers (ex: IE7+, FF, etc)
enter image description here

HTML：

<div id="nav">
    <ul>
        <li> <a href="index.php">Main</a> </li>
        <li> <a href="index.php">Questions</a> </li>
    </ul>
    <div style="clear:both;"></div>
</div>

CSS：

div#nav {
    background-color:#00376d;
    margin-bottom:5px;
}
div#nav ul {
    margin:0;
    padding:0;
    list-style-type:none;
}
div#nav ul li {
    float:right;
}
div#nav ul li a {
    display:block;
    border-left:1px solid #fff;
    padding:5px 15px;
    background-color:#00376d;
    color:#fff;
    text-decoration:none;
}
div#nav ul li a:hover {
    background-color:#02509d;
}

如何解决这个问题？

Answer 1

我还没有测试IE6超过一年。它已经很久了，恕我直言。无论如何，这应该解决IE6的问题（并且无论如何都是更好的编码方式）：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">

div#nav {
    background-color:#00376d;
    margin-bottom:5px;
}
div#nav ul {
    margin:0;
    padding:0;
    list-style-type:none;
    overflow: hidden;
    width: 100%;
}
div#nav ul li {
    float:right;
}
div#nav ul li a {
    display:block;
    border-left:1px solid #fff;
    padding:5px 15px;
    background-color:#00376d;
    color:#fff;
    text-decoration:none;
}
div#nav ul li a:hover {
    background-color:#02509d;
}

</style>
</head>
<body>

<div id="nav">
    <ul>
        <li> <a href="index.php">Main</a> </li>
        <li> <a href="index.php">Questions</a> </li>
    </ul>
</div>

</body>
</html>

菜单中只有ie6的空白区域

1 个答案: