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

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

• Для минимизации глюков поведения -moz-inline-box желательно внутрь такого элемента вставить дополнительный строковый элемент с display:block. Однако, в этом случае необходимо добавить float:left для IE, иначе он будет растягивать такой элемент на всю возможную (для безграничных возможностей ие) ширину.

• Если нужно задавать фиксированные размеры для элемента inline-block, лучше задавать его и для самого элемента, и для внутреннего элемента (во избежание некоторых проблем).

• Поведение -moz-inline-box местами непредсказуемое, поэтому во время разработки нужно чаще тестировать поведение таких элементов в Fx2, однако внутренние элементы уже будут обретать привычные черты.

• Т.к. в Fx3 нормальное поведение inline-block уже реализовано, подключать решение нужно примерно так: display:-moz-inline-box; display:inline-block;, вторая лиса увидит только свою проприетарщину, а третья — заметит и стандартное значение, которое и применит.

• К сожалению, применяя к подобным элементам vertical-align, очень сложно добиться одинакового выравнивания во всех браузерах.

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

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

Вы можете прокомментировать эту статью в Мастодоне.

Опубликовано 30 сентября 2008 г. с метками: #Practical #Bugs #CSS #Outdated