css:悬停颜色错误

Question

当我为一个网站创建菜单时，我注意到了一些奇怪的事情。看看这个小屁孩说明了这个问题。

请注意，当您在菜单项上悬停时，最后一个字母的右边是橙色的小点。

为什么会发生这种事？

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

我在Mac上用Chrome。我注意到火狐并没有出现这种情况，所以这是一个与浏览器相关的问题。

更新

谢谢你的回答和建议，如何解决它！我接受了马塞尔的回答，因为这似乎是最正确的答案，为什么会发生。我不知道是否是这样，但这似乎是一个Webkit问题。如果您注意到任何非webkit浏览器的错误，请说，我会更新这一点。

Answer 1

它似乎是一个亚像素渲染工件。opacity:.9999;到li a的CSS规则似乎解决了这个问题。

Answer 2

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

至于为什么会发生这种情况，我唯一能想到的是，T的一对边缘像素正延伸到锚盒的边缘。添加填充物使盒子稍微膨胀了一点，但似乎有点刺耳。

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