Из этой заметки вы узнаете:
- как ведёт себя элемент со значением display: inline-block;
- какие бывают сюрпризы при его применении;
- как обойти зловредный IE7;
- а также как можно использовать display: inline-block и чем он лучше float: left.
Значение inline-block генерирует блочный элемент с поведением строчного элемента. Другими словами, элемент становится строчным «снаружи» и блочным «внутри»: по отношению к внешним элементам, соседям и предкам, он ведёт себя как строчный (inline), а по отношению к потомкам — как блок (block). При этом он приобретает следующие свойства строчных элементов:
- может размещаться на одной строке с себе подобными;
- по умолчанию имеет ширину по содержанию (то есть, по ширине самого широкого элемента, какой есть внутри);
- поддаётся вертикальному выравниванию с помощью свойства
vertical-align(значение по умолчанию — baseline; последнее необходимо помнить, чтобы избегать некоторых surpris’ов при использованииinline-block);
однако сохраняет ряд блочных свойств:
- можно управлять размерами с помощью
widthиheight; - можно задавать поля (
margin) и отступы (padding), как блочному, при этом вертикальные отступы не будут заезжать на соседние элементы; - можно центрировать содержание (
text-align).
В общем, не жизнь, а малина. Но красота картины омрачается тем, что не ушедший пока в небытие IE7 поддерживает inline-block только для строчных элементов. Приходится бороться.
Можно обматерить браузер, но он не отреагирует. Можно обматерить разработчиков, но они или не услышат, или предложат обновиться до IE8 — IE9 — IE10. Можно пожаловаться на несправедливость жизни, но… Это не только не эстетично, но и не дёшево, не надёжно и не практично.
Псевдо-inline-block для IE7
Вместо каноничного inline-block под IE7 приходится применять простой inline. Но чтобы фокус удался по-настоящему, надо позвать на помощь полумистическое свойство HasLayout. Оно не соответствует стандартам css, но присутствует в IE6 и IE7 (в IE8 его уже нет). Это свойство не имеет собственного селектора, а появляется при наличии некоторых других свойств. Например, zoom: 1. Обратите внимание: это свойство некошерно отсутствует в стандартах CSS2.1 и CSS3. Но в IE7 оно работает. Во избежание проблем, хаки под IE следует выносить в отдельный файл и подключать через условные комментарии.
Итого для всех браузеров:
.content div{
display: inline-block;
}
и для IE7 персонально:
.content div{
zoom: 1;
display: inline;
}
Если нельзя вынести в отдельный файл, вставляем условные комментарии прямо в страницу:
<!--[if lte IE 7]>
<style type="text/css">
.content div{
zoom:1;
display:inline;
}
</style>
<![endif]-->
Стили для IE7 подключаем после основных.
Особенности в применении inline-block
- Пробелы или переводы строк между строчными элементами браузер отображает как пробел (зазор по горизонтали). Это распространяется и на строчно-блочные: пример 1. Чтобы избежать лишних зазоров, пробелы и переводы строк следует удалять. (IE7 и тут ведёт себя нестандартно, и пробелов не делает.)
-
Элементы со значением
display: inline-blockпо умолчанию выравниваются по базовой линии (baseline). Базовая линия, она же линия шрифта — воображаемая линия, проходящая по нижнему краю прямых знаков без учёта свисаний и нижних выносных элементов:
Пример 2: примеры вертикального выравнивания строчно-блочных элементов. Интересно, что IE8, Гугль Хром и Опера вычисляют базовую линию для таблиц иначе, чем IE7 и Фаерфокс.
Однако вертикальное выравнивание действует только на сам inline-block элемент и не распространяется на его потомков. Вертикальное выравнивание содержимого возможно только у элементов таблиц или элементов html с табличными значениями свойства display.
-
По умолчанию ширина inline-block-элемента определяется содержанием. Поэтому не удивляйтесь, если строчно-блочный элемент с одной единственной строчкой растянется на всю ширину страницы: пример 3. Для борьбы с этим приходится задавать элементам ширину (
width) или максимальную ширину (max-width). -
Хотя inline-block элементы по отношению к соседям ведут себя как строчные, для потомков они выступают блочными. Разницу между inline и inline-block можно представить так: inline — мягкий мешок, содержимое которого рассыпается внутри и распяливает родителя как вздумает и куда вздумает, а inline-block — твёрдая коробка (box), явным образом ограничивающая поведение потомков.
Также следует помнить, что изменение значения свойства display через css не изменяет классовую принадлежность элемента. По стандартам html в изначально строчные элементы нельзя вкладывать блочные, и изменение свойств через css не отменяет этого правила. Это значит, что не следует использовать inline-block span в качестве контейнера для p, table или div .
Display: inline-block и float: left
Правило display: inline-block позволяет выстроить блочные элементы рядами (годится для разного рода галереек, лент превьюшек и анонсов). Для той же цели нередко применяют правило float: left — плавающие блоки, но с ними возникает ряд проблем.
-
Float-элементы, имеющие разную высоту, при переходе на новую строку, «затекают» друг за друга; вместо ровных строк получается нагромождение блоков: пример 4.
Для лечения этой проблемы блокам обычно назначают фиксированную высоту с запасом, но, во-первых, у какого-нибудь блока содержание может оказаться выше ожидаемого, во-вторых, у блоков с малым содержанием внизу образуются лишние пустоты.
Правило display: inline-block выстраивает блоки ровными строками, причём высота строки определяется по самому высокому из них.
-
Плавающие элементы всегда прижаты к верху строки. Элементы со значением
display: inline-blockможно выровнять по высоте вверх, вниз и посередине с помощью свойстваvertical-align(напомню, что по умолчанию выравнивание идёт по базовой линии): снова пример 2. -
Плавающие блоки невозможно центрировать: они всегда прижаты к краю контейнера (левому или правому, в зависимости от значения float: left или float: right). Строчно-блочные элементы можно выравнивать влево, вправо или посередине, задав их контейнеру горизонтальное выравнивание
text-align. Пример 5: центрирование inline-block элементов.
Вот главное, что нужно знать об этом значении display. А какие вы знаете способы его применения?
47 комментариев на «Display: inline-block, или на грани кроссбраузерности»
Шамшур Иван (2 комментария)
Спасибо за такую подробную статью! Полезно знать!
Дмитрий (5 комментариев)
> Пробелы или переводы строк между строчными элементами
Можно убрать свойством word-spacing (или letter-spacing) с отрицательным значением у элемента родителя, ну и конечно же отрицательный margin тоже сойдет
Княгиня (660 комментариев)
Я пробовала word-spacing и letter-spacing — результат выходит нестабильный. А margin для нейтрализации пробелов — нетехнологично.
Дмитрий (5 комментариев)
Не уверен, но возможно тут помогут значения в em или ex, т.к. ширина символа пробела имеет зависимость от шрифта.
Княгиня (660 комментариев)
Я и такой вариант рассматривала. Правда, до логического упора это дело не довела, потому что не стояло практической необходимости. Но да, надо это додумать, ибо не всегда есть уверенность, что админ сайта не напихает пробелов.
Игроман (1 комментарий)
Как же надоело играть в войну с этим тупым Ослом. Для этого инвалида пишешь отдельный css-файл.
За статью спасибо, я часто стал использовать inline-block, но про затычки для Осла не знал.
Княгиня (660 комментариев)
На здоровье.
С восьмым ИЕ уже можно жить, вот седьмой создаёт проблемы. А ещё, говорят, есть мазохисты, которые до сих пор пользуются шестым. Хотя я считаю, что ие6 в логах — в основном боты.
logvi (1 комментарий)
Иногда требуют поддержку ие6. В основном это госучреждения где юзают старое железо и не имеют денег на обновление парка ПК. Я считаю если за это платят деньги, то можно и повозится, тем более это серьезная школа для верстальшика.
Княгиня (660 комментариев)
Для inline-block в IE6 работает та же подпорка, что и для IE7. Что касается «школы», то для меня это уже не школа: я начинала с шестым, когда седьмого ещё и в проекте не было. Вот, кстати, памятка о выходе IE7 «в свет»: оно нечаянно нагрянет.
sarandon (3 комментария)
Даже IE9 продолжает, увы, создавать проблемы…
Для почитать об этом подробнее — вот ссылка:
http://sitingstudio.ru/index.php/ournews/40-podborka-kosyakov-internet-explorer-9
Княгиня (660 комментариев)
Да, интересные наблюдения. Я под ие9 не тестирую (не на чем — даже IETester почему-то не может показать девятый), и потому надеюсь, что люди, перешедшие на семёрку, сразу берут десятый ие. С другой стороны, я стремлюсь сделать макет максимально прозрачным, чтобы не возникало запутанностей. И, кстати, мне никогда не пришло бы в голову класть в контейнер с display:table блоки с float, ибо в table надо вкладывать table-cell, а иначе зачем он нужен?
sarandon (3 комментария)
Ну, IE9 был комплектацией Win7 по умолчанию, до выхода IE10. И, в связи с довольно широко распространенной паранойей не скачивать обновления из интернета (присущей пока еще довольно широкому кругу пользователей), приходится учитывать особенности этого вредного IE9 при верстке. Кстати, именно эта паранойя и комплектование WinXP в широко популярном «ломаном» русскоязычном варианте SP2 браузером IE6 является причиной того, что «шестерка» до сих пор используется на необъятных просторах Родины.
Кроме того, а к чему IE Tester в варианте Win7? Очень хорош встроенный по F12 инструмент самого IE9, который дает возможность эмулировать отображение сайта во всех IE, начиная с 7. Ну, и, естественно, этот инструмент присутствует и в IE10.
Княгиня (660 комментариев)
Я всё ещё застряла на XP, так что вопрос тестинга актуален. Я всё ближе и ближе к тому, чтобы переехать на семёрку, но меня пугает грандиозный процесс переноса программ и восстановления любимых настроек.
Что касается шестёрки, то её по умолчанию в ТЗ уже не учитывают. И даже семёрку — редко. И ещё я думаю, что часть тех немногочисленных шестёрок, кои ещё попадаются в моей статистике — боты. А те, которые не боты — люди, выходящие в инет с казённых компьютеров, где запрещено ставить свои программы и обновляться.
Глеб Варганов (1 комментарий)
У меня в итоге не получилось обойти этот вредный эксплорер!(
На локалхосте могут быть ошибки из-за того что он на vartrigo server работает?
Княгиня (660 комментариев)
Нет, работа сервера никак не влияет на css. Проверьте, правильно ли вы подключаете стили, не застряло ли где-то что-то взаимоисключающее.
vovans (9 комментариев)
Ой, а у меня пользователей ишака вообще мало )) 6-кой заходят за месяц единицы. 7-кой чуть больше, но можно на них не обращать внимания. Я.матрика показывает 0% по первому, и 1% по второму (по факту, конечно же, меньше. А вот ФФ, Хром, опера — 46/26/20%.
В общем, радует то, что 6-7 ишак отживает своё
Княгиня (660 комментариев)
У меня на этом блоге (по Яндекс.Метрике) IE6 и IE7 по 1%, а на другом семерки 4%, шестёрки 3%. Но мне очень сильно кажется, что шестёрку в основном оставляют в статистике боты. Также встречается девятка и несколько случаев IE5.5.
А так да, мечтаю, когда можно будет про 6-7 забыть. Тогда можно сделать много вкусного с меньшими усилиями. И я говорю не про красоты.
vovans (9 комментариев)
я думаю, об этом мечтают все здравомыслящие люди )))
Хорошо ещё, ято ишака сейчас совсем мало стало. Не так давно было реально засилие. А теперь очень даже ничего ситуация.
vovans (9 комментариев)
Как раз сегодня пришлось повозиться с «inline-block». Долго думал, где же я про него читал недавно )))
Спасибо, пригодилось! :о)
abbyy lingvo (2 комментария)
удивительно, сейчас верстаю сайт и все время попадаются моменты, где надо использовать Display: inline-block) удачно я к Вам зашла=)
Спонсор (4 комментария)
Может быть немного поофтоплю, за что заранее прошу прощения, но почему все до сих пор возятся с этим IE? Неужели им еще кто-то пользуется? мне кажется если бы прекратили все эти танцы с бубном, то он давно уже покинул наш мир и больше не беспокоил…
Княгиня (660 комментариев)
Похоже, что для вас IE — исключительно шестой. Меж тем с восьмым уже можно жить, а девятый, по слухам, очень даже хорош. К сожалению, Майкрософт не позволяет устанавливать его на XP.