Display: inline-block, или на грани кроссбраузерности

5 сентября 2011. Рубрики: Рабочие заметки; автор — Юлия Панина aka Княгиня.

Из этой заметки вы узнаете:

  • как ведёт себя элемент со значением 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. Пробелы или переводы строк между строчными элементами браузер отображает как пробел (зазор по горизонтали). Это распространяется и на строчно-блочные: пример 1. Чтобы избежать лишних зазоров, пробелы и переводы строк следует удалять. (IE7 и тут ведёт себя нестандартно, и пробелов не делает.)
  2. Элементы со значением display: inline-block по умолчанию выравниваются по базовой линии (baseline). Базовая линия, она же линия шрифта — воображаемая линия, проходящая по нижнему краю прямых знаков без учёта свисаний и нижних выносных элементов:

    Базовая линия (линия шрифта)

    Пример 2: примеры вертикального выравнивания строчно-блочных элементов. Интересно, что IE8, Гугль Хром и Опера вычисляют базовую линию для таблиц иначе, чем IE7 и Фаерфокс.

    Однако вертикальное выравнивание действует только на сам inline-block элемент и не распространяется на его потомков. Вертикальное выравнивание содержимого возможно только у элементов таблиц или элементов html с табличными значениями свойства display.

  3. По умолчанию ширина inline-block-элемента определяется содержанием. Поэтому не удивляйтесь, если строчно-блочный элемент с одной единственной строчкой растянется на всю ширину страницы: пример 3. Для борьбы с этим приходится задавать элементам ширину (width) или максимальную ширину (max-width).

  4. Хотя 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 — плавающие блоки, но с ними возникает ряд проблем.

  1. Float-элементы, имеющие разную высоту, при переходе на новую строку, «затекают» друг за друга; вместо ровных строк получается нагромождение блоков: пример 4.

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

    Правило display: inline-block выстраивает блоки ровными строками, причём высота строки определяется по самому высокому из них.

  2. Плавающие элементы всегда прижаты к верху строки. Элементы со значением display: inline-block можно выровнять по высоте вверх, вниз и посередине с помощью свойства vertical-align (напомню, что по умолчанию выравнивание идёт по базовой линии): снова пример 2.

  3. Плавающие блоки невозможно центрировать: они всегда прижаты к краю контейнера (левому или правому, в зависимости от значения float: left или float: right). Строчно-блочные элементы можно выравнивать влево, вправо или посередине, задав их контейнеру горизонтальное выравнивание text-align. Пример 5: центрирование inline-block элементов.

Вот главное, что нужно знать об этом значении display. А какие вы знаете способы его применения?

Отзывы (47) на «Display: inline-block, или на грани кроссбраузерности»
  1. Шамшур Иван (2 комментария)

    Спасибо за такую подробную статью! Полезно знать!

    Ответить на этот комментарий
  2. Дмитрий (5 комментариев)

    > Пробелы или переводы строк между строчными элементами
    Можно убрать свойством word-spacing (или letter-spacing) с отрицательным значением у элемента родителя, ну и конечно же отрицательный margin тоже сойдет ;)

    Ответить на этот комментарий
    • Княгиня (648 комментариев)

      Я пробовала word-spacing и letter-spacing — результат выходит нестабильный. А margin для нейтрализации пробелов — нетехнологично.

      Ответить на этот комментарий
      • Дмитрий (5 комментариев)

        Не уверен, но возможно тут помогут значения в em или ex, т.к. ширина символа пробела имеет зависимость от шрифта.

        Ответить на этот комментарий
        • Княгиня (648 комментариев)

          Я и такой вариант рассматривала. Правда, до логического упора это дело не довела, потому что не стояло практической необходимости. Но да, надо это додумать, ибо не всегда есть уверенность, что админ сайта не напихает пробелов.

          Ответить на этот комментарий
  3. Игроман (1 комментарий)

    Как же надоело играть в войну с этим тупым Ослом. Для этого инвалида пишешь отдельный css-файл.
    За статью спасибо, я часто стал использовать inline-block, но про затычки для Осла не знал.

    Ответить на этот комментарий
    • Княгиня (648 комментариев)

      На здоровье.

      С восьмым ИЕ уже можно жить, вот седьмой создаёт проблемы. А ещё, говорят, есть мазохисты, которые до сих пор пользуются шестым. Хотя я считаю, что ие6 в логах — в основном боты.

      Ответить на этот комментарий
      • logvi (1 комментарий)

        Иногда требуют поддержку ие6. В основном это госучреждения где юзают старое железо и не имеют денег на обновление парка ПК. Я считаю если за это платят деньги, то можно и повозится, тем более это серьезная школа для верстальшика.

        Ответить на этот комментарий
        • Княгиня (648 комментариев)

          Для inline-block в IE6 работает та же подпорка, что и для IE7. Что касается «школы», то для меня это уже не школа: я начинала с шестым, когда седьмого ещё и в проекте не было. Вот, кстати, памятка о выходе IE7 «в свет»: оно нечаянно нагрянет.

          Ответить на этот комментарий
      • sarandon (3 комментария)

        Даже IE9 продолжает, увы, создавать проблемы…
        Для почитать об этом подробнее — вот ссылка:
        http://sitingstudio.ru/index.php/ournews/40-podborka-kosyakov-internet-explorer-9

        Ответить на этот комментарий
        • Княгиня (648 комментариев)

          Да, интересные наблюдения. Я под ие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.

            Ответить на этот комментарий
            • Княгиня (648 комментариев)

              Я всё ещё застряла на XP, так что вопрос тестинга актуален. Я всё ближе и ближе к тому, чтобы переехать на семёрку, но меня пугает грандиозный процесс переноса программ и восстановления любимых настроек. %)

              Что касается шестёрки, то её по умолчанию в ТЗ уже не учитывают. И даже семёрку — редко. И ещё я думаю, что часть тех немногочисленных шестёрок, кои ещё попадаются в моей статистике — боты. А те, которые не боты — люди, выходящие в инет с казённых компьютеров, где запрещено ставить свои программы и обновляться.

              Ответить на этот комментарий
  4. Глеб Варганов (1 комментарий)

    У меня в итоге не получилось обойти этот вредный эксплорер!(
    На локалхосте могут быть ошибки из-за того что он на vartrigo server работает? :(

    Ответить на этот комментарий
    • Княгиня (648 комментариев)

      Нет, работа сервера никак не влияет на css. Проверьте, правильно ли вы подключаете стили, не застряло ли где-то что-то взаимоисключающее.

      Ответить на этот комментарий
  5. vovans (9 комментариев)

    Ой, а у меня пользователей ишака вообще мало )) 6-кой заходят за месяц единицы. 7-кой чуть больше, но можно на них не обращать внимания. Я.матрика показывает 0% по первому, и 1% по второму (по факту, конечно же, меньше. А вот ФФ, Хром, опера — 46/26/20%.

    В общем, радует то, что 6-7 ишак отживает своё :)

    Ответить на этот комментарий
    • Княгиня (648 комментариев)

      У меня на этом блоге (по Яндекс.Метрике) IE6 и IE7 по 1%, а на другом семерки 4%, шестёрки 3%. Но мне очень сильно кажется, что шестёрку в основном оставляют в статистике боты. Также встречается девятка и несколько случаев IE5.5. =-O

      А так да, мечтаю, когда можно будет про 6-7 забыть. Тогда можно сделать много вкусного с меньшими усилиями. И я говорю не про красоты.

      Ответить на этот комментарий
      • vovans (9 комментариев)

        я думаю, об этом мечтают все здравомыслящие люди )))

        Хорошо ещё, ято ишака сейчас совсем мало стало. Не так давно было реально засилие. А теперь очень даже ничего ситуация.

        Ответить на этот комментарий
        • vovans (9 комментариев)

          Как раз сегодня пришлось повозиться с «inline-block». Долго думал, где же я про него читал недавно )))

          Спасибо, пригодилось! :о)

          Ответить на этот комментарий
  6. abbyy lingvo (2 комментария)

    удивительно, сейчас верстаю сайт и все время попадаются моменты, где надо использовать Display: inline-block) удачно я к Вам зашла=)

    Ответить на этот комментарий
  7. Спонсор (4 комментария)

    Может быть немного поофтоплю, за что заранее прошу прощения, но почему все до сих пор возятся с этим IE? Неужели им еще кто-то пользуется? мне кажется если бы прекратили все эти танцы с бубном, то он давно уже покинул наш мир и больше не беспокоил…

    Ответить на этот комментарий
    • Княгиня (648 комментариев)

      Похоже, что для вас IE — исключительно шестой. Меж тем с восьмым уже можно жить, а девятый, по слухам, очень даже хорош. К сожалению, Майкрософт не позволяет устанавливать его на XP.

      Ответить на этот комментарий

Есть что сказать? Не молчим!

Используйте теги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" code=""> <ul> <li> <ol> .

Комментарии короче 200 символов публикуются без активной ссылки. Пробелы не учитываются.

Ссылки с комментариев dofollow. Ознакомьтесь, пожалуйста, с правилами dofollow-комментирования. Кто не читает, тот сам себе враг.