Css: hover color error

Question

I just noticed something strange while creating a menu for a website. Look at this script that illustrates the problem.

Notice the small orange spot to the right of the last letter when you hover over a menu item.
Why is this happening?

I can soften the "orange effect" by reducing the contrast between the color of the foreground and background, but this will not solve the problem. Is this a mistake, or is there a smart way to fix it?

I am using Chrome on Mac. I noticed that this does not happen in Firefox, so this is a browser related issue.

Update
Thanks for the answers and suggestions on how to fix them! I accepted Marcel's answer, as this seemed to be the most correct answer about why it happens. I do not know if this is so, but this is a Webkit problem. If you notice an error in any browser other than webkit, say so and I will update it.

Answer 1

This seems to be an artifact subpixel rendering . Adding opacity:.9999; in CSS rules for li a seems to fix the problem.

Answer 2

If you add padding-right: 1px; in li a, the orange dot will disappear and allow you to save the font.

As far as this happens, the only thing I could think of is that the pairs of edge pixels T extend beyond the edge of the anchor block. Adding an add-on has slightly expanded the window, but it seems pretty hacky.

If you add a background color for snapping, you can see that the edge of T is outside the background.

Answer 3

This is a Caliber font. If you change the font, it should disappear.

Update: Perhaps this is not the font itself, but changing to different fonts fixes the problem.