Время для прочтения: 0 мин. 39 сек.

Кроссбраузерный inline-block

Internet Explorer версий 6 и 7 имеет не полную поддержку значения display: inline-block, которое применяется только для встроенных элементов, с блочными элементами работает некорректно. И в браузере FireFox 2 тоже не всё так просто с inline-block - он его не понимает наглухо.

Дабы исправить ситуацию, приведу кроссбраузерный подход к решению поставленной задачи.


div.inlineblock {
    display: -moz-inline-stack; /* FF2 */
    display: inline-block;
}

Для нашего любимого браузера включим hasLayout:


* html div.inline-block {
    display: inline;
    zoom: 1;
}

<div class="inlineblock">Кроссбраузерный inline-block</div>

Вообще, чтобы не городить огород для IE, достаточно изначально использовать inline-элементы (например, del или ins), дав им layout.

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

Ссылки

Для вставки кода используйте HTML-теги
<pre><code class="php">ваш код</code></pre>