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

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

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

    .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

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

9
css firefox html-rendering webkit

4 ответов

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

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

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

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

13

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

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

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

1

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

1