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

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 中，您也在搜索列表项中的任何锚点，因此无论如何它都无法找到它，因为您将它们弄错了。