Недавно я закодировал веб-сайт и протестировал его во всех браузерах, как обычно, чтобы обеспечить согласованность между браузерами. Я тестировал 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;
}