CSS：悬停颜色错误

Posted 2023-03-06

【中文标题】CSS：悬停颜色错误

【英文标题】：css:hover color bug

【发布时间】：2011-08-15 15:03:38

【问题描述】：

在为网站创建菜单时，我刚刚注意到一些奇怪的事情。 Take a look at this Fiddle 说明了问题。

当您将鼠标悬停在菜单项上时，请注意最后一个字母右侧的橙色小点。为什么会发生这种情况？

我可以通过降低前景色和背景色之间的对比度来淡化“橙色效果”，但这并不能解决实际问题。这是一个错误，还是有一个聪明的方法来解决这个问题？

顺便说一句，我在 Mac 上使用 Chrome。我注意到它不会在 Firefox 中发生，所以这是与浏览器相关的问题。

更新 感谢您提供有关如何修复它的答案和建议！我接受了马塞尔的回答，因为这似乎是关于为什么会发生的最正确的答案。我不知道是不是这样，但这似乎是一个Webkit问题。如果您发现任何非 webkit 浏览器中的错误，请说出来，我会更新。

【问题讨论】：

它高 2 个像素，颜色为#3a0000，很奇怪...起初以为只是我的眼睛。我在 Windows 7 上，在 Chrome10 中看到了它，但在 FF4 中没有看到。

很确定它与浏览器中的字体平滑/抗锯齿有关，或者可能某些字体渲染超出其“盒子大小”并且没有完全包含在锚点中“一半-pixel" :) 看起来这对我来说可能是一个错误（尽管很小）。你如何发现这超出了我的范围......

当颜色之间存在较大对比时，这一点非常明显。在 Fiddle 中，我使用黑色作为悬停颜色来说明问题，但使用任何其他颜色也很容易注意到。

是的，这似乎只是 WebKit 中的一个失效错误。把它归档在他们身上？

刚刚做了。将其发布在 Chromium 网站上。希望他们能从那里开始处理它。

【参考方案1】：

它似乎是一个subpixel rendering 神器。 Adding opacity:.9999; li a 的 CSS 规则似乎可以解决问题。

【参考方案2】：

如果你将padding-right: 1px;添加到li a，橙色圆点会消失，让你保留字体。

至于它发生的原因，我唯一能想到的是 T 的几个边缘像素延伸超出了锚框的边缘。添加内边距使盒子稍微扩大了一点，但它看起来相当老套。

如果给anchor加上背景色，可以看到T的边缘在背景之外。

【参考方案3】：

它是 Calibri 字体。如果您更改字体，它应该会消失。

更新： 也许它不是字体本身，但更改为不同的字体可以解决问题。

【讨论】：

你从哪里得到这个解释？我尝试了一种 Impact 字体以确保它仍然存在。注意问题的粗体部分Why is this occurring?

Impact 做同样的事情。试试 Arial 什么的。

我在几种字体上尝试过，所有字体都存在。此外，更改字体也不是解决办法。

为什么我们会认为是字体而不是浏览器？你们在其他浏览器中也会发生这种情况吗？

好的。我在窗户上。我尝试了 Arial 和 Monospace。它消失了。 Firefox4 中的相同