Хорошо, это сложная проблема, которую нужно решить:
У меня есть дизайн сайта, на который сильно влияют различия в высоте строк в браузерах, использующих DirectWrite и GDI для визуализации шрифтов.Это приводит к смещению фоновых изображений в IE9 и FF4 + (среди прочих проблем).
Вот краткий пример:
позволяет предположить, что мы уже сбросили CSS.Код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<head>
<style>
span {
font-family: Arial;
font-size: 12px;
font-weight: bold;
border: solid 1px;
}
</style>
</head>
<body>
<span>Some example text</span>
</body>
</html>
Это выглядит следующим образом:
Как вы можете видеть, текст в IE9 (и Firefox 4+) на 1px корочечем старые браузеры GDI.Это вызывает значительные проблемы во всем макете моего сайта, в частности, при размещении фоновых изображений (например, значков) в линейных элементах, как показано на двух скриншотах, сделанных с одной и той же страницы на моем сайте (линии для увеличения в 3 пикселя добавлены для ясности и выровнены).с первой строкой текста):
Чистый результат заключается в том, что в IE9 значки выглядят на 1 и 2 пикселя ниже.Одним из возможных решений было бы добавление отступа в 2 пикселя, чтобы толкать текст вниз, чтобы он оставался на одной линии со значком.Помимо хакерства и полного беспорядка (можете ли вы в любом случае выделить firefox 4+ в css?), Требуемый отступ варьируется от элемента к элементу (1-3 пикселя, насколько я могу видеть в моем случае) и вызывает собственные проблемы.
Что происходит?Я понимаю, что DirectWrite может в некоторых случаях уменьшать размер шрифтов, но почему производители браузеров изменили высоту строки по сравнению с тем, что было раньше?Конечно, это влияет на многие сайты.
Любая помощь будет принята с благодарностью.
Ура, Лев