这真的很奇怪，有点令人气愤。我试图让一个链接改变颜色，很简单，对吧？不。出于某种原因，当我将鼠标悬停在“j”字符上时，Chrome 拒绝更改“j”字符上的 2 个像素的颜色。我在 Safari 中试过，它有同样的问题；另一方面，firefox 完美地呈现了它。
我试过更改字体，但问题仍然存在。在我测试的所有字体中，只有 Arial 没有这个问题。
不知道这是否重要，但文本被包裹在 ol>li>a
当我尝试使用 :hover forced 在 chrome 开发者工具中截取屏幕截图时，效果非常好，所以我不得不从手机上拍照并使用鼠标悬停。
编辑:添加了CodePen Demo EDIT2:似乎被包裹在 ol>li 中与它有任何关系
最佳答案
它是由 subpixel rendering 引起的.如果您将 opacity: 0.9999; 添加到 li a，它将为您修复。
更新
您还可以执行 text-rendering: optimizeLegibility;，它不会像以前的解决方案那样切断像素。
关于html - 关于重新着色 "j"字符的 webkit 问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17845974/