关于重新着色“j”字符的webkit问题

Question

这真是奇怪而且有点真气。我试图让链接改变颜色，简单，对吧？不能。出于某种原因，当我将鼠标悬停在“j”字符上时，Chrome拒绝更改2个像素的颜色。我在Safari中尝试过，它有同样的问题;另一方面，firefox完美呈现它。

我尝试过更改字体，但问题仍然存在。我测试的所有字体中只有Arial没有问题。

不知道是否重要，但文字包含在ol＆gt; li＆gt; a

中

当我尝试截取屏幕截图时：hover强制使用Chrome开发人员工具它完美无缺，因此我不得不从手机拍摄照片并使用鼠标悬停。

编辑：已添加CodePen Demo EDIT2：好像被包裹在ol＆gt; li与它有任何关系

Answer 1

由subpixel rendering引起。如果您将opacity: 0.9999;添加到li a，则会为您解决此问题。

更新

你也可以做text-rendering: optimizeLegibility;，它不像前面的解决方案那样切断像素。