Высота строки в IE против Firefox

Question

У меня есть H1 с определенным размером шрифта и высотой строки, а также заполнением нулями и полем. Однако результат в IE имеет дополнительный пиксель отступа вверху до начала текста, даже если элемент все еще занимает то же вертикальное пространство.

Есть ли несоответствие в том, как высота строки отображается в браузерах?

стили:

h1, h1 a { font-size:32px; line-height:44px; margin:0px;padding:0px;border:0px;}

---

спасибо

Answer 1

Вы не установили высоту для элемента H1, высота отображаемого элемента зависела от отображаемого текста.

В FF, без установки высоты, два разных H1 визуализировались на разных высотах, 40 против 44 пикселей, из-за разной высоты символов, после установки высоты оба элемента отображались, как и ожидалось. (Различия в FF по сравнению с IE для текстового рендерера могут быть причиной обнаруженного расхождения.)

Свойство line-height будет определять только положение текста по вертикали в пределах условного прямоугольника, окружающего высоту шрифта. (включая восходящие (f) и спусковые (q)).

Принудительная установка height & line-height позволяет браузеру размещать текстовое поле в одной и той же позиции независимо от содержания текста.

h1, h1 a { 
    font-size:32px; 
    line-height:44px;
    height:44px;       /* ++ */
    margin:0px;
    padding:0px;
    border:0px;
}

Answer 2

Это также может быть vertical metrics проблема. Если сам шрифт имеет плохие метрики, он никогда не будет выровнен правильно. Единственный способ согласованно отображать шрифт в разных браузерах - это исправить его вертикальные метрики.

Большинство поставщиков шрифтов позволяют обновлять и исправлять вертикальные метрики шрифта перед его загрузкой. Они могут назвать этот вариант по-другому, хотя. Например: Fontsquirrel называет это Auto-Adjust Vertical Metrics, myFonts.com называет это Line Height Adjustments.

Подробнее об этом: Шрифт: плохие вертикальные метрики приводят к непоследовательности рендеринга по высоте строки в браузерах Решение