css:hover 颜色错误

Question

在为网站创建菜单时，我刚刚注意到一些奇怪的事情。 看看this Fiddle ，它说明了这个问题。

当您在菜单项上 hover 时，请注意最后一个字母右侧的橙色小点。
为什么会出现这种情况？

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

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

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

Answer 1

它似乎是一个亚像素渲染神器。 添加opacity:.9999; 到li a的 CSS 规则似乎可以解决问题。

Answer 2

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

至于它发生的原因，我唯一能想到的是 T 的几个边缘像素延伸超过了锚框的边缘。 添加填充使盒子稍微扩大了一点，但它看起来相当骇人听闻。

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

Answer 3

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

更新：也许它不是字体本身，但更改为不同的 fonts 解决了这个问题。