Текст не центрирован по вертикали ⇐ CSS

[Anonymous]

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

Эту проблему можно увидеть на jsfiddle: http://jsfiddle.net/KFxG3/1/< /p>

Код очень прост:

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

 qb - Some text - qb

Добавление стиля:

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

 div {
background-color: green;
height: 22px;
line-height: 22px;
font-size: 20px;
font-family: 'Segoe UI', 'Verdana', 'Arial';
}

Вот как это выглядит:




И вот как это ДОЛЖНО выглядеть:




Почему это происходит в новых браузерах? Я тестировал его на 64-разрядной версии Windows 8.1 в Firefox 27.0.

РЕДАКТИРОВАТЬ: Я хочу знать, ПОЧЕМУ браузеры не отображаются правильно. Маленькая буква типа «а» должна занимать одинаковое пространство вверху и внизу «зеленого цвета» при применении высоты строки, равной высоте контейнера. Но рендеринг неправильный.

РЕДАКТИРОВАТЬ №2: Проблема со шрифтом. Пользовательский интерфейс Segoe, похоже, имеет странную основу. При использовании Arial, Verdana или любого другого вертикальное выравнивание подходит лучше (но оно тоже не идеально). -> http://jsfiddle.net/KFxG3/22/

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