CSS: зависание цвета

Question

Я только что заметил что-то странное при создании меню для сайта. Взгляните на эту скрипку , которая иллюстрирует проблему.

Обратите внимание на небольшое оранжевое пятно справа от последней буквы при наведении на пункт меню.
Почему это происходит?

Я могу смягчить «оранжевый эффект», уменьшив контраст между цветом переднего плана и цветом фона, но это не решает реальной проблемы. Это ошибка или есть умный способ исправить это?

Я использую Chrome на Mac, кстати. Я заметил, что это не происходит в Firefox, поэтому это проблема, связанная с браузером.

Обновление
Спасибо за ответы и предложения о том, как это исправить! Я принял ответ Марселя, так как это казалось наиболее правильным ответом о том, почему это происходит. Я не знаю, так ли это, но, похоже, это проблема Webkit. Если вы заметили ошибку в любом браузере, отличном от webkit, скажите об этом, и я обновлю это.

Answer 1

Кажется, это субпиксельный рендеринг артефакт. Добавление opacity:.9999; к правилам CSS для li a, похоже, решает проблему.

Answer 2

Если вы добавите padding-right: 1px; в li a, оранжевая точка исчезнет и позволит вам сохранить шрифт.

Что касается того, почему это происходит, единственное, о чем я мог подумать, было то, чтопара краевых пикселей T простирались за край якорного ящика.Добавление отступов немного расширило окно, но выглядит довольно хакерски.

Если вы добавите цвет фона для привязки, вы увидите, что край T находится за пределами фона.

Answer 3

Это шрифт Calibri. Если вы измените шрифт, он должен исчезнуть.

Обновление: Может быть, это не сам шрифт, но изменение на другие шрифты решает проблему.