CSS：文本颜色在Safari / Firefox中略微偏移 [英] CSS: Text color slightly offset in Safari/Firefox
问题描述
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 - 使用不同的渲染引擎。它可能是系统相关的？一个可访问性设置也许？
这个问题是由浏览器否定计算确切字形边界造成的。）
解决这个问题的方法是在CSS中添加一行文本：
text-rendering：optimizeLegibility;
这行可以添加到需要它的div的CSS中，这样就没有额外的处理完成到页面的其余部分。
I'm having a strange problem with a website I'm building for a client. I have some links in a list as part of a table, and in my CSS I have the following:
a:hover {
text-decoration: none;
color: #DB6633;
}
Which changes the link to orange when the mouse hovers over it. This works fine on my 3 Macs using Firefox, Safari, Chrome etc (and my Windows PC using the same). However when viewed on my clients browsers (Safari & Firefox on OS X 10.6.4) they see this:
and this:
etc. As you can see, the orange doesn't line up with the text properly. I haven't seen this before, and I can't reproduce it at my end. I'm also having a problem with some images being slightly out also, but I'm not sure if that is related.
The client is running the latest versions of Safari & Firefox (as am I). They are running OS X 10.6.4, but I have that on one of my laptops and it displays the site fine.
Has anyone seen this before, and if so how can I fix this?
** EDIT **
OK some more detail: it happens less in Firefox than in Safari. I'm going to try and get it down to the least amount of code to reproduce it then I'll update with that also.
I think it's telling that it appears on both Firefox & Safari - which use different rendering engines. Could it be system related? An accessibility setting perhaps?
The problem is caused by the browser negating to compute exact glyph bounds (Done for the sake of performance.)
The solution to this problem is to add a single line of text into your CSS:
text-rendering:optimizeLegibility;
this line can be added to the CSS of the div that requires it, and that way there's no extra processing done to the rest of the page.
这篇关于CSS：文本颜色在Safari / Firefox中略微偏移的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
