Реше­ние in­line-block

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

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

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

  2. dis­play:in­line-block ни­как не ра­бо­та­ет в Fire­Fox вер­сий ниже 3-ей. Од­на­ко, есть один об­ход­ной путь.

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

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

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

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

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

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

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

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

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