CSS链接导航浏览器兼容性

Question

我有一个用于站点导航的水平链接列表(实现为看起来像选项卡)。

我今天在手机上检查了我的页面，它在 Opera 或 Internet Explorer 上显示不正确。回到家后，我检查了 Internet Explorer 6，显示方式相同。

HTML

<div id="navcontainer"><ul>
    <li><a href="">Home</a></li>
    <li><a href="">Projects</a></li>
    <li><a href="" id="current">Resume</a></li>
    <li><a href="">Referances</a></li>
    <li><a href="">Fun</a></li>
</ul></div>

CSS

#navcontainer>ul{
    text-align: center;
    padding: 3px 0;
}

#navcontainer>ul>li {
    display: inline;
}

#navcontainer>ul>li>a {
    padding: 3px 0.5em;
    margin-left: 3px;
    border: 1px solid #778;
    border-bottom: none;
    background: #bbd;
}

#navcontainer>ul>li>a:hover {
    background-color: #369;
}

#navcontainer>ul>li>a#current {
    background: #fff;
    border-bottom: 1px solid white;
}

更改它以使其更兼容浏览器的最佳方法是什么？

Answer 1

IE6 不太喜欢display:inline。在你的 li 和 li a 上尝试 float:left。

此外，IE6 不支持 > 子选择器。