Русские документы
Ежедневные компьютерные новости RSS rusdoc.ru  Найти :
Новости
Последние поступления
Книжный магазин
  Hardware:
Видеоустройства
Системные платы
Процессоры
Мобильные устройства
Аудиосистема
Охлаждение системы
Накопители информации
КПК и ноутбуки
Телефоны и связь
Периферия
Система
Сети
Разные устройства
 
  Programming:
Web-разработка
Языки программирования
Технологии и теория
Разработка игр
Программная инженерия
 
  Software:
Операционные системы
Windows 7
Базы данных
Обзоры программ
Графика и дизайн
   
  Life:
Компьютерная жизнь
Разные материалы
   
Партнеры
Публикация
Правовая информация
Реклама на сайте
Обратная связь
Экспорт в RSS Экспорт в RSS2.0
    Читать в Яндекс.Ленте



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

Раздел: Programming / Вебмастеру @ 23.01.2012 | Ключевые слова: иконки выравнивание версия для печати

Автор: smashercosmo
Источник: habrahabr

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

image



Не долго думая, пишем простую разметку и 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 пока приходится считаться, и в нем как раз вышеприведенный код рендрится следующим образом:

image

Не уверен точно, в чем причина подобного поведения, но скорее всего это связано с некорректной работой свойства 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. Во-вторых высота строки зависит от размера шрифта и гарнитуры. Поэтому если пользователь вдруг у себя в настройках изменил размер шрифта, то все ваше позиционирование тут же слетит к черту.

Это интересно:








версия для печатиРаспечатать статью


Вернуться в раздел: Programming / Вебмастеру


Реклама:
Читать наc на:

Add to Google
Читать в Яндекс.Ленте






Rambler's Top100
© Copyright 1998-2012 Александр Томов. All rights reserved.