CSS:hover颜色bug

Question

CSS:hover颜色bug

6

我刚刚注意到一个奇怪的问题，当我为一个网站创建菜单时。请查看这个演示，它说明了这个问题。

当您悬停在菜单项上时，请注意最后一个字母右侧的小橙点。
为什么会出现这种情况？ 我可以通过降低前景和背景颜色之间的对比度来减弱“橙色效果”，但这并不能解决实际问题。这是一个错误吗，还是有聪明的方法来解决这个问题？

顺便说一句，我在Mac上使用Chrome。我注意到在Firefox中不会出现这种情况，所以这是一个与浏览器相关的问题。更新
感谢您的答案和建议！我接受了Marcel的答案，因为他似乎是关于为什么会出现这种情况的最正确的答案。我不知道是否如此，但这似乎是Webkit的问题。如果您在任何非Webkit浏览器中注意到这个错误，请告诉我，我会更新这个信息。

- Frederik Wordenskjold

1

它只有2个像素高，颜色为#3a0000，很奇怪...一开始以为是我的眼睛出了问题。我使用的是Windows 7，在Chrome10中看到了这个问题，但在FF4中没有。 - Wesley Murch

1

我相信这与浏览器中的字体平滑/反锯齿有关，或者是某些字体渲染扩展超出其“框大小”，并且没有完全包含在锚点中，可能是由于“半像素”造成的 :) 对我来说看起来像是一个错误（尽管很小）。你是如何发现这个问题的，我无法理解... - Wesley Murch

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

是的，这似乎只是 WebKit 中的一个无效错误。在他们那里提交吧？ - Boris Zbarsky

刚刚完成了。已经发布在Chromium网站上了。希望他们可以从那里开始处理。 - Frederik Wordenskjold

2个回答

5

如果您在li a中添加padding-right: 1px;，那么橙色圆点将消失，并且您可以保留字体。

至于为什么会出现这种情况，我唯一能想到的就是T的一对边缘像素超出了锚定框的边缘。添加填充会稍微扩展框，但似乎有些hackish（笨拙的）。

如果您向添加背景颜色，则可以看到T的边缘在背景外。

- Alex Jillard

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Marcel · Accepted Answer

看起来这是次像素渲染的一个问题。为li a的CSS规则添加opacity:.9999;似乎可以解决这个问题。