CSS: цвет текста слегка смещен в Safari / Firefox - PullRequest
1 голос
/ 07 февраля 2011

У меня странная проблема с веб-сайтом, который я создаю для клиента.У меня есть некоторые ссылки в списке как часть таблицы, и в моем CSS у меня есть следующее:

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

, который меняет ссылку на оранжевый, когда курсор мыши над ним.Это отлично работает на моих 3 компьютерах Mac, использующих Firefox, Safari, Chrome и т. Д. (И на моем ПК с Windows, использующих то же самое).Однако при просмотре в браузерах моих клиентов (Safari & Firefox на OS X 10.6.4) они видят это:

enter image description here

и это:

enter image description here

и т. Д.Как видите, апельсин не совпадает с текстом.Я не видел этого раньше, и я не могу воспроизвести это в моем конце.У меня также есть проблема с некоторыми изображениями, которые также немного отсутствуют, но я не уверен, что это связано.

На клиенте установлены последние версии Safari & Firefox (как и я).Они работают под управлением OS X 10.6.4, но у меня есть это на одном из моих ноутбуков, и он отлично отображает сайт.

Кто-нибудь видел это раньше, и если да, то как я могу это исправить?

** РЕДАКТИРОВАТЬ **

ОК, более подробно: в Firefox это происходит реже, чем в Safari.Я собираюсь попытаться сократить его до минимального количества кода, чтобы воспроизвести его, а затем обновлю его также.

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

1 Ответ

2 голосов
/ 20 марта 2012

Проблема вызвана тем, что браузер отказывается вычислять точные границы глифов (сделано ради производительности.)

Решением этой проблемы является добавление одной строки текста в ваш CSS:

text-rendering:optimizeLegibility;

эта строка может быть добавлена ​​в CSS для div, который требует этого, и, таким образом, дополнительная обработка не выполняется для остальной части страницы.

...