Текст не по вертикальному центру ⇐ Html

[Anonymous]

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

Код: Выделить всё

div {
background-color: green;
height: 22px;
line-height: 22px;
font-size: 20px;
font-family: 'Segoe UI', 'Verdana', 'Arial';
}< /code>
qb - Some text - qb

Вы также можете увидеть эту проблему на jsfiddle: http: // jsfiddle .net/kfxg3/1/
Вот как это выглядит:

И это так выглядеть так:

Почему почему Это происходит в новых браузерах? Я протестировал его в Windows 8.1 64 бит с Firefox 27.0. < /P>

Я хочу знать, Почему < /strong> браузеры не имеют рендеринг правильно. Небольшая буква, подобная «A», должна получить то же пространство в верхнюю и нижнюю часть «зеленого» при применении высоты линии, которая такая же высота, как контейнер. Но рендеринг неправильный.

Подробнее здесь: https://stackoverflow.com/questions/215 ... y-centered