webkit против firefox высота текста

Question

У меня довольно большой текст (размер шрифта 28). Я пытаюсь выровнять по вертикали в контейнере с фиксированной высотой.

Я делаю это на глаз и просто устанавливаю верхнюю границу, чтобы она попала в нужное место. Однако, когда в Firefox мне нужна верхняя граница 20px, в Safari мне нужно 15px (иначе это слишком далеко вниз). Я увидел, что это расхождение связано с тем, что в Safari текстовый элемент выше, чем в Firefox, и включает небольшое количество пробелов сверху, которые не отображаются в Firefox (в Firefox верхняя часть текстового элемента находится точно в начале текста ).

Я пробовал все виды комбинаций отображения с высотами строк и, возможно, добавляя ширину / высоту для текста и еще много чего. Ничего не работает.

Что я могу сделать, чтобы это было последовательным? Я бы не хотел использовать JS, но, похоже, это единственный вариант ...

---

Answer 1

Вам необходимо применить сброс CSS.Хорошая практика - использовать один на всех проектах.Самое известное из известных мне: http://meyerweb.com/eric/tools/css/reset/

Answer 2

Для кросс-браузерной нормализации CSS я бы рекомендовал сброс - у YUI3 есть хороший, Twitter Bootstrap - еще один хороший.Он в основном устанавливает отступы и поля равными 0, поэтому все браузеры будут вести себя и придерживаться только ВАШИХ правил CSS, а не своих собственных правил по умолчанию.

Для вертикального выравнивания текста по контейнерам, если это одна строка текста, используйте свойство line-height и установите его равным высоте контейнера.

Например:

CSS:

div {
    height:300px;
    width: 400px;
    line-height: 300px;
    font-size:28px;
    background-color:#F0F0F0;
}

HTML:

<div>
   Some vertically centered text
</div>

Пример: http://jsfiddle.net/Djvv7/