Попробуем пояснить вкратце. Если вы создаете плавающий элемент в IE6 и задаете ему параметр отступа с той же стороны, с которой указан float, то отступ (волшебным образом) удвоится. Это можно исправить посредством хака параметра отступа в IE6, а точнее, указать значение отступа в два раза меньшее, чем требуется. Или вы можете (в большинстве случаев) задать параметру отображения элемента значение inline-block (опять же, только касательно IE6). Это должно решить проблему в большинстве случаев, если отсутствуют какие-либо другие обстоятельства.
Хотя этот метод для плавающих элементов в большинстве случаев служит лишь для придания значения inline-block, его можно применять и для других целей.
Как он определяется?
Вот несколько определений значению inline-block, взятых с сайтов, которые заслуживают внимания:
: Следуя информации с Sitepoint :
«inline-block делает так, что элемент генерирует блок, который расположен так, как будто является встроенным».
: Согласно сайту QuirksMode :
«Встроенный блок расположен как встроенный (например, на той же строчке, что и соседнее наполнение), но является отдельным блоком».
: Согласно Роберту Найману :
«Изначально, это отличный способ встраивать элементы, но при этом сохранять их свойства блоков (например, ширина и высота, верхний и нижний отступы и так далее)».
Нам кажется, что определение Наймана наиболее описывает систему.
Демонстрация
Посмотрите на изображение, которое демонстрирует нам inline-block. Здесь вы можете увидеть, как система ведет себя:
Как это можно применять?
Вот несколько ситуаций, в которых следовало бы воспользоваться inline-block:
* Для препятствия неправильной реализации отступов плавающих элементов в IE6 (случай был описан выше)
* Для размещения нескольких блочных элементов в одну горизонтальную строку, не преобразовывая их в плавающие
* Для того чтобы встроенному элементу можно было менять параметры высоты/ширины, но при этом он оставался встроенным
* Для того чтобы встроенному элементу можно было задавать параметры отступов и плотности.
То, что следует учитывать
Если вы собираетесь использовать метод inline-block, то вам следует обратить внимание на некоторые вещи. inline-block-элемент материально обусловлен белым пространством, так что если вы захотите отобразить список посредством inline-block (в навигационном меню, к примеру), то между пунктами списка, возможно, будут нежелательные промежутки. Для того чтобы убрать эти промежутки, вам придется вырезать с вашего кода HTML любые пробелы, которые находятся между пунктами списка. Т.е. код вашего списка должен выглядеть вот так:
<ul>
<li>Item One</li><li>Item Two</li><li>Item Three</li><li>Item Four</li><li>Item Five</li>
</ul>Или еще хуже:
<ul>
<li>Item One</li
><li>Item Two</li
><li>Item Three</li
><li>Item Four</li
><li>Item Five</li>
</ul>Проблема может быть так же решена посредством добавления параметра font-size:0 элементу "ul", или нечто похожим, и дальнейшим увеличением шрифта каждому пункту списка. Но это требует много места и кода, так что мы рекомендуем вам в этом случае не пользоваться inline-block.
Также, если вы объявляете число элементов, использующих inline-block, а эти элементы отличаются по параметру высоты, то вам придется добавить что-нибудь типа параметра vertical-align: top, чтобы быть уверенными в том, что выравнивание не будет различаться. Посмотрите на эту интересную страницу, которая демонстрирует нам данные особенности при различных обстоятельствах.
В заключение, мы путем собственных экспериментов обнаружили то, что inline-block работает неправильно, когда элемент расположен внутри текста, который находится внутри элемента абзаца.
Касательно кросс-браузерности
Вас не должно было удивить то, что inline-block работает одинаково во всех браузерах, за исключением IE6 и 7. Но и в этих версиях эту проблему не так и сложно решить. Для того, чтобы элемент принял значение inline-block в IE6-7, вам просто нужно сбросить параметр отображения и выставить значение inline, а затем сверстать элемент. Просто убедитесь в том, что значение inline следует за inline-block в вашем CSS, и не забудьте спрятать значение inline от других браузеров. Возможно, вам также придется подправить вертикальное выравнивание в этих версиях.
