Изменение размера шрифта Firefox 4

Недавно я закодировал веб-сайт и протестировал его во всех браузерах, как обычно, чтобы обеспечить согласованность между браузерами. Я тестировал IE 7, IE 8, Chrome и Firefox 3.6.

Однако пользователь, использующий Firefox 4, указал мне на то, что некоторые части CSS не работают. Изучив его, кажется, что размер шрифта в Firefox 4 немного больше, чем в любом другом браузере, в результате чего текст смещается вниз и нарушается часть макета.

Мне удалось обойти большинство проблем, но последняя нерешенная проблема заключается в том, что у меня есть текстовое поле, плавающее влево с интервалом, с меньшим текстом внутри, плавающее справа от него. Диапазон имеет рамку вокруг него и точно совпадает с высотой текстового поля. Из-за разницы в размере шрифта в Firefox 4 текстовое поле выглядит глубже, чем должно, а это означает, что диапазон больше не выстраивается внизу.

Я осмотрелся, чтобы узнать, не сталкивались ли еще какие-либо проблемы с отображением текста в Firefox 4 больше, чем в других браузерах, но не повезло. У кого-нибудь еще была такая же проблема? Я не люблю "обходные пути" - я бы предпочел найти достойное решение этой проблемы - я должен делать что-то странное!

Заранее спасибо за вашу помощь!

EDIT Код для body по умолчанию для всех размеров шрифта:

body 
{
    font-size: 69.5%;
    font-family: Tahoma, Verdana, Sans-Serif;
    margin: 0;
    padding: 0;
    background: #4997C4 url(/Images/main_bg.gif) repeat-x left top;
}

Код для одной из проблемных областей текста:

.content .banner p.content_text
{
    margin: 5px 0 2px 12px;
    font-size: 1.2em;
    color: #38393C;
    width: 374px;
    line-height: 1.3em;
}

person Leah    schedule 14.06.2011    source источник


Ответы (2)


Вы используете относительные размеры шрифта (%, em), поэтому, если пользователь указал другой размер шрифта по умолчанию в браузере, размер шрифта на странице будет другим. В качестве решения вы можете использовать абсолютный размер шрифта, например px. (Та же проблема со свойством line-height)

Другой проблемой может быть графическое аппаратное ускорение в FF 4 (у меня были и другие проблемы с этим), оно имеет некоторое влияние на отрисовку шрифтов.

person Floern    schedule 14.06.2011
comment
Спасибо за ответ. Причина, по которой я использую ems, заключается в том, что он более доступен, так что размер шрифта можно увеличить. Тем не менее, я посмотрю аппаратное ускорение графики в FF4 - спасибо. - person Leah; 15.06.2011
comment
Я изучил это и могу подтвердить следующее: ... функция аппаратного ускорения Firefox 4 ... отображает шрифты не так плавно, что приводит к блеклым, сглаженным, туманным, пористым, нечетким, размытым и плохим шрифтам в тексте. дисплей, который может быть нечитаемым и определенно грязным и уродливым. Хуже того, некоторый текст вместо этого кажется толще, крупнее, жирнее, шире и крупнее, в результате чего ширина строки становится больше, интервалы и разметка смещены, или текст выглядит сжатым или сплющенным... coderetard.com/2011/03 /10/ Не похоже, что есть исправление. - person Leah; 15.06.2011

Попробуйте изменить размер шрифта на пиксели с em и посмотрите, исправит ли это проблему. Если это так, то это настройка пользовательского агента, которую вы не можете контролировать, кроме как с помощью значений пикселей.

Если это не так, нам понадобится дополнительная информация. На какой платформе вы используете FF4, а не FF3.6 и другие? Все на Mac будет выглядеть по-другому, например, из-за того, как Mac обрабатывает шрифты.

person Shauna    schedule 14.06.2011
comment
Спасибо за ваше предложение - я бы не хотел переходить на использование абсолютных размеров шрифта в будущем, но я попытался изменить размеры шрифта в этом случае, чтобы посмотреть, работает ли ваше предложение. К сожалению, разницы нет. Я изменил код, который я разместил в своем вопросе, чтобы использовать 12 пикселей вместо относительных размеров, но FF4 по-прежнему отображает текст немного больше или с большим интервалом, я не уверен. Я протестировал все браузеры на ПК с Windows под управлением Vista или Windows 7. Я еще не тестировал на Mac. Еще раз спасибо за помощь. - person Leah; 15.06.2011