ешение inline-block

Одним из самых интересных свойств в CSS является inline-block. Возможность создавать блоки, ведущие себя как строчные элементы потенциально несёт очень много радости. С одной стороны, можно управлять такими блоками при помощи text-align, с другой — внедрять в текст, используя или как иконки, или как отдельные смысловые элементы, вместе с остальным текстом переносящиеся со строчки на строчку и обтекаемые флоатами.

Однако, существуют две причины, по которой вёрстка с использованием подобных блоков почти не получила распространения:

  1. display:inline-block в IE срабатывает только для изначально строчных элементов, вроде A, SPAN и прочих. При этом возможности обойти это, насколько мне известно, нет — век живи, век учись — если сначала у блока, пускай и блочного, стоит display:inline-block, а позже только для IE мы пропишем display:inline всё волшебным образом заработает.

  2. display:inline-block никак не работает в FireFox версий ниже 3-ей. Однако, есть один обходной путь.

Тогда, как Fx2 простой inline-block не понимает, существует проприетарное лисье свойство display:-moz-inline-box. К сожалению, это не полноценное решение проблемы, а костыль, имеющий множество ограничений по использованию, но на безрыбье и оно сгодится, если использовать его аккуратно.

Под аккуратностью я понимаю следующие моменты:

Ну и несколько примеров применения

P.S.: Следует упомянуть, что существует элемент, который практически во всех браузерах ведет себя как inline-block элемент почти безукоризненно. Это тег button. Правда, минусов у реализации inline-block при помощи кнопок предостаточно: много различных стилей, которые прийдется обнулять, невозможность кроссбраузерно и легко сделать простую ссылку на кнопочной основе, ну и изначальная семантика кнопки, из-за которой возможность её применения будет возникать очень редко.

Опубликовано с метками: