Question

在Chrome中，“主页”链接保持其他链接的颜色，并且在悬停时它们都会变为白色。但是，在Firefox中，“Home”链接为蓝色，即使单击它也会保持蓝色（但在悬停时它确实变为白色）。 IE似乎表现得很正常，就像在Chrome中一样。

我尝试过很多东西但没有结果。也许有人可以看到我的错误。

谢谢！

Answer 1

为避免此类问题，您最好直接在与此类似的链接上设置颜色：

a{
 display:block;
 text-decoration:none;
 color: #ffffff;
}

并且，您还应该更新浏览器版本以防万一。

Answer 2

添加：

#nav ul li:hover a {
    color: rgb(255, 255, 255);
}

默认的浏览器预设会覆盖您的CSS规则，因为它更具体。

其他链接不受影响，因为您使用<span style="color:#fff">包装它们，这会覆盖其默认颜色。

PS：在Chrome上，它会像所有其他浏览器一样显示蓝色。

Answer 3

您的“主页”链接是唯一未被<span style="color:#fff">包裹的链接。

Answer 4

您需要将padding添加到a tags而不是li。

这是 fiddle 。

<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">New Patient Process</a></li>
    <li><a href="#">Health Products</a></li>
    <li><a href="#">About Us</a></li>
</ul>

ul li a {
    text-decoration:none;
    display:block;
    padding: 16px 20px;
    color:#583709;
    transition:.5s all;
}

ul li a:hover {
    color:#fff;
    background:#000;
}

Firefox中的链接保持蓝色

4 个答案: