CSS: Text color slightly offset in Safari/Firefox

问题:

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?

回答1:

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.