Добрый день. В этой коротенькой заметке я расскажу как кроссбраузерно выровнять иконки по базовой линии шрифта. Итак, задача на первый взгляд довольно тривиальна: в макете, который прислал дизайнер существует следующий, весьма стандартный, блок (имя пользователя в хедере после того как пользователь осуществил вход на сайт)
Не долго думая, пишем простую разметку и css к ней:
HTML
CSS
После чего открываем страницу во всех браузерах и видим, что всё везде работает как надо, так как все инлайн и инлайн-блок элементы по умолчанию выравниваются по базовой линии шрифта. Однако IE как обычно преподносит сюрприз. Я понимаю, что IE6 уже дышит на ладан, но вот с IE7 пока приходится считаться, и в нем как раз вышеприведенный код рендрится следующим образом:
Не уверен точно, в чем причина подобного поведения, но скорее всего это связано с некорректной работой свойства display: inline-block в IE6-7.
При этом если вместо спана с фоном поставить обычную картинку, то все прекрасно выравнивается, однако это решение нас не устраивает, так как все иконки зашиты в спрайт, что не позволяет нам использовать обычные картинки.
Решение пришло довольно быстро: нужно всего лишь запихнуть в спан еще один пустой спан, который насильственно заставляет весь блок, какого бы он ни был размера, выравниваться по базовой линии.
И наш HTML тогда начинает выглядить следующим образом:
На этом всё. Спасибо за внимание.
Для тех, кто не понимает, зачем ставить иконку отдельным элементом, а не просто фоном спану с текстом, объясняю:
1. Во-первых, решение с фоном зависит от высоты строки. Если высота иконки будет больше высоты строки, она будет обрезаться. А высота строки это такая величина, в которой никогда нельзя быть на 100% уверенным; в разных ситуациях, в разных браузерах, на разных платформах она может высчитываться совершенно по-разному.
2. Во-вторых высота строки зависит от размера шрифта и гарнитуры. Поэтому если пользователь вдруг у себя в настройках изменил размер шрифта, то все ваше позиционирование тут же слетит к черту.
Не долго думая, пишем простую разметку и 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.
При этом если вместо спана с фоном поставить обычную картинку, то все прекрасно выравнивается, однако это решение нас не устраивает, так как все иконки зашиты в спрайт, что не позволяет нам использовать обычные картинки.
Решение пришло довольно быстро: нужно всего лишь запихнуть в спан еще один пустой спан, который насильственно заставляет весь блок, какого бы он ни был размера, выравниваться по базовой линии.
И наш HTML тогда начинает выглядить следующим образом:
<div class="user">
<span class="user-icon"><span></span></span>
<span class="user-name">User Name</span>
</div>
На этом всё. Спасибо за внимание.
Upd. 1
Для тех, кто не понимает, зачем ставить иконку отдельным элементом, а не просто фоном спану с текстом, объясняю:
1. Во-первых, решение с фоном зависит от высоты строки. Если высота иконки будет больше высоты строки, она будет обрезаться. А высота строки это такая величина, в которой никогда нельзя быть на 100% уверенным; в разных ситуациях, в разных браузерах, на разных платформах она может высчитываться совершенно по-разному.
2. Во-вторых высота строки зависит от размера шрифта и гарнитуры. Поэтому если пользователь вдруг у себя в настройках изменил размер шрифта, то все ваше позиционирование тут же слетит к черту.