Мобильная версияЯ использую свойство line-height для выравнивания текста по значкам в меню. Я создал упрощенную версию (без значков), чтобы проиллюстрировать свою проблему. Похоже, проблема связана с общим вертикальным выравниванием шрифтов.
Эту проблему можно увидеть на jsfiddle: http://jsfiddle.net/KFxG3/1/
Код очень прост:
qb – Некоторый текст – qb Добавление стиля:
div { цвет фона: зеленый; высота: 22 пикселей; высота строки: 22 пикселей; размер шрифта: 20 пикселей; семейство шрифтов: «Segoe UI», «Verdana», «Arial»; }
Вот как это выглядит:
И вот как это ДОЛЖНО выглядеть:
Почему это происходит в новых браузерах? Я тестировал его на 64-разрядной версии Windows 8.1 в Firefox 27.0.
РЕДАКТИРОВАТЬ: Я хочу знать, ПОЧЕМУ браузеры не отображаются правильно. Маленькая буква, такая как «а», должна занимать одинаковое пространство вверху и внизу «зеленого цвета» при применении высоты строки, равной высоте контейнера. Но рендеринг неправильный.
РЕДАКТИРОВАНИЕ №2: Проблема со шрифтом. Пользовательский интерфейс Segoe, похоже, имеет странную основу. При использовании Arial, Verdana или любого другого вертикальное выравнивание подходит лучше (но оно тоже не идеально). -> http://jsfiddle.net/KFxG3/22/
