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

首先，Internet Explorer 6不支持您正在使用的直接子选择器（＆gt;）。

Answer 2

IE6非常不喜欢display:inline。在float:left和li上尝试li a。

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

Answer 3

对于你应该设置的li项目：

 float: left;
 display: inline;
 list-style-type: none;

Answer 4

所以这里的问题是这个吗？

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

哪个应该是

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

CSS链接导航浏览器兼容性

4 个答案: