Выравнивание иконок по базовой линии шрифта.

A+ A-

 

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





Не долго думая, пишем простую разметку и css к ней:

HTML

<div class="user">
    <span class="user-icon"></span>
    <span class="user-name">User Name</span>
</div>

CSS

.user-icon {
    width: 23px; height: 20px;
    background: url('person.png');
    display: inline-block;
    margin-right: 3px;
}
.user-name {
    font-size: 14px;
}

После чего открываем страницу во всех браузерах и видим, что всё везде работает как надо, так как все инлайн и инлайн-блок элементы по умолчанию выравниваются по базовой линии шрифта. Однако IE как обычно преподносит сюрприз. Я понимаю, что IE6 уже дышит на ладан, но вот с IE7 пока приходится считаться, и в нем как раз вышеприведенный код рендрится следующим образом:



Не уверен точно, в чем причина подобного поведения, но скорее всего это связано с некорректной работой свойства display: inline-block в IE6-7.
При этом если вместо спана с фоном поставить обычную картинку, то все прекрасно выравнивается, однако это решение нас не устраивает, так как все иконки зашиты в спрайт, что не позволяет нам использовать обычные картинки.
Решение пришло довольно быстро: нужно всего лишь ( только для IE ) запихнуть в спан однопиксельный гиф, который насильственно заставляет весь блок, какого бы он ни был размера, выравниваться по базовой линии.
И наш HTML тогда начинает выглядить следующим образом:

<div class="user">
    <span class="user-icon"><!--[if lte IE 7]><img src="baseline-fix.gif"><![endif]--></span>
    <span class="user-name">User Name</span>
</div>

На этом всё. Спасибо за внимание.

Upd.

Как подсказал пользователь ferrari есть гораздо более простое решение. Достаточно положить внутрь любой инлайновый элемент, в частности ещё один спан. Тогда наш код становится ещё проще:

<div class="user">
    <span class="user-icon"><span></span></span>
    <span class="user-name">User Name</span>
</div>

Upd. 2

Для тех, кто не понимает, зачем ставить иконку отдельным элементом, а не просто фоном спану с текстом, объясняю:

1. Во-первых, решение с фоном зависит от высоты строки. Если высота иконки будет больше высоты строки, она будет обрезаться. А высота строки это такая величина, в которой никогда нельзя быть на 100% уверенным; в разных ситуациях, в разных браузерах, на разных платформах она может высчитываться совершенно по-разному.

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

Posted in: сss, html