html - CSS:Safari/Firefox 中的文本颜色略有偏移

Question

我在为客户构建的网站上遇到了一个奇怪的问题。我在列表中有一些链接作为表格的一部分，在我的 CSS 中有以下内容:

a:hover {
文字修饰:无；
颜色:#DB6633；
}

当鼠标悬停在链接上时，它会将链接更改为橙色。这在我使用 Firefox、Safari、Chrome 等的 3 台 Mac 上运行良好(以及我使用相同的 Windows PC)。但是，当在我的客户端浏览器(OS X 10.6.4 上的 Safari 和 Firefox)上查看时，他们会看到:

还有这个:

等如您所见，橙色与文本没有正确对齐。我以前没见过这个，最后我无法重现它。我也遇到了一些图像略有偏移的问题，但我不确定这是否相关。

客户端正在运行最新版本的 Safari 和 Firefox(我也是)。他们运行的是 OS X 10.6.4，但我在我的一台笔记本电脑上安装了它，它可以正常显示网站。

有没有人以前见过这个，如果有我该如何解决？

** 编辑 **

确定更多细节:它在 Firefox 中比在 Safari 中发生得少。我将尝试将其减少到最少的代码量以重现它，然后我也会更新它。

我认为这表明它同时出现在 Firefox 和 Safari 上——它们使用不同的渲染引擎。会不会跟系统有关？也许是无障碍设置？

Answer 1

问题是由浏览器否定计算精确的字形边界引起的(为了性能而完成。)

此问题的解决方案是在您的 CSS 中添加一行文本:

text-rendering:optimizeLegibility;

这一行可以添加到需要它的 div 的 CSS 中，这样就不会对页面的其余部分进行额外的处理。