Вертикальное выравнивание текста в контейнере WebKit vs Firefox

Question

Проблема заключается в том, что браузеры на базе Firefox и WebKit, похоже, по-разному выравнивают текст по вертикали, если он содержится в элементе, который имеет одинаковую высоту / высоту строки и размер шрифта неравномерен (или наоборот).Я посмотрел на какую-то похожую ветку, но не нашел большого объяснения моего вопроса.

Рассмотрим http://alternativeto.net/test2.htm.Это действительно простая страница с

    .box
    {
        font-size: 15px;
        font-family: Helvetica, Arial;
        background-color: Blue;
        height: 20px;
        width: 60px;
        color: White;
        line-height: 20px;
    }

и

    <div class="box">
        A text.
    </div>

Если вы откроете эту страницу в Chrome и Firefox, вы заметите, что они выравнивают текст по-разному: http://screencast.com/t/tjgA2d7T

Есть ли способ это исправить?Есть ли какое-либо свойство text-align или что-то, что я пропустил?

Answer 1

Это связано с различиями в том, как браузеры обрабатывают субпиксельное позиционирование текста.Если высота строки составляет 20 пикселей, а размер шрифта - 15 пикселей, текст должен располагаться на расстоянии 2,5 пикселя от верхней части строки. Gecko фактически делает это (а затем сглаживает или привязывается к пиксельной сетке по мере необходимости при рисовании).WebKit просто округляет позиции до целых пикселей во время макета.В некоторых случаях два подхода дают ответы, которые отличаются на пиксель.Если вы не сравниваете их бок о бок, как вы можете сказать, что есть разница?

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

Answer 2

Это проблема рендеринга в браузере. Используйте высоту строки на 1px меньше заданной высоты, например:

    .box
{
   background-color: Blue;
   color: White;
   font-family: Helvetica,Arial;
   font-size: 15px;
   height: 18px;
   line-height: 17px;
   width: 60px;
}

Answer 3

Тьфу, ужасно, но правда! Я просто наткнулся на это, пытаясь создать крошечные пузырьки на значке - настолько маленькие, что мне нужно было располагаться прямо рядом с текстом, чтобы подсчитывался каждый пиксель. Уменьшение высоты строки в 1 раз по сравнению с размером текста выравнивало поле дисплея между FF и Chrome.

Answer 4

Если вы ищете способ точного выравнивания по вертикали, проверьте вопрос переполнения стека Проблема с выравниванием по вертикали: среднее; - я описал решение там.

Если вы хотите получить ответ, почему Firebug и Chrome отображают это по-разному, это будет немного сложнее.Выравнивание по высоте строки основано на рендеринге шрифта и шрифты могут обрабатываться совершенно по-разному в разных браузерах.Например, сглаживание шрифта и вес шрифта могут действительно испортить вашу страницу.

Кроме того, вы используете сброс CSS для этой страницы?Он также содержит настройки, связанные со шрифтами, и может помочь вам преодолеть проблемы с кросс-браузерными операциями.См. Инструменты CSS: Сброс CSS .