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

Question

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

a:hover { text-decoration: none; color: #DB6633; }

当鼠标悬停在链接上时，它会将链接更改为橙色。这在我使用Firefox、Safari、Chrome等浏览器的3台Mac电脑上运行良好(我的Windows PC也是如此)。然而，当在我的客户端浏览器( OS X 10.6.4上的Safari和Firefox )上查看时，他们会看到以下内容：

​

​

还有这个：

​

​

如您所见，橙色与文本不能正确对齐。我以前没有见过这个，我也不能在我这一端重现它。我也有一些图像略有脱节的问题，但我不确定这是否相关。

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

以前有没有人见过这种情况，如果是这样，我该如何解决？

**编辑**

好的，更多细节:在Firefox中发生的情况比在Safari中发生的要少。我会试着用最少的代码来重现它，然后我也会更新它。

我认为它同时出现在Firefox和Safari上很能说明问题--这两个浏览器使用了不同的渲染引擎。会不会与系统有关？也许是一个可访问性设置？

Answer 1

这个问题是由于浏览器拒绝计算精确的字形边界(为了提高性能而这样做)造成的。

这个问题的解决方案是在CSS中添加一行文本：

text-rendering:optimizeLegibility;

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