Question

我正在开发一个简单的HTML网站，但导致浏览器无法在Chrome和Safari中正确呈现，但在Firefox（所有在Mac上）都很好。

nav li应该是15px填充的块，彼此相邻浮动，在悬停时显示浅绿色背景。在Chrome和Safari中，它们只是显示页面默认链接样式而没有浮动。

该网站可在此处查看：http://www.rjlacount.com/clients/GreenTree

感谢您的帮助！

这是我用于导航菜单的CSS：

ul#nav {
    font-size:16px;
    border-top:1px solid #a4a4a4;
    border-bottom:1px solid #a4a4a4;
    text-align:center;
    margin:40px auto;
    list-style:none;
}

ul#nav li a:link, ul#nav li a:visited {
    float:left;
    padding:15px 43px;
    text-decoration:none;
    font-weight:normal;
    color:#000;
}

ul#nav li a:active, ul#nav li a:hover {
    background:#e6ffdc;
    text-decoration:none;
}

ul#nav li.highlight a:link, ul#nav li.highlight a:visited {
    background:#e6ffdc;
}

Answer 1

查看您的来源，这似乎是您的标记中的问题。 <a>标记应位于<li>标记内，这似乎是在firefox上自动完成的，但不是在webkit中。

在您提供的CSS中，您也在搜索列表项中的任何锚点，因此无论如何它都无法找到它，因为您的方法错误。

导航li样式无法在Chrome或Safari中呈现，在Firefox中很好

1 个答案: