css-html.org

Как нам известно Internet Explorer версий 6 и 7 имеет не полную поддержку значения display: inline-block;. Эти версии Интернет Эксплорера нормально рендерят inline-block-чные элементы, только если по дефолту эти элементы имею значение inline (это такие элементы как a, em, span, strong и т.д.).

А между прочим это значение может стать полезным при реализации горизонтальных менюшек и, например, пагинации.

А как же заставить блочные (и прочие отличные от inline) элементы рендериться как inline-block? Для этого необходимо нужному элементу присвоить display: inline; zoom: 1;. С помощью zoom: 1; мы присваиваем элементу hasLayout.

Таким образом элементы с display: inline; zoom: 1; в IE 6 и 7 будут отоборажаться как inline-block. Конечно же не забываем обрамлять условными комментариями код написаный исключительно для IE.

Этим решением со мной поделился добрый человек Сергей Чикуёнок, за что ему большое спасибо.

Ещё немного материала по теме.

UPD: оказывается в FF2 тоже не всё чисто с display: inline-block;. Вот ещё одна заметка о кроссбраузерном использовании inline-block. Хотя по статистике LiveInternet доля FF2 в рунете составляет всего 2,2%, но всё равно, думаю, будет не лишним позаботиться о том, чтоб и в этом браузере всё отображалось нормально.

Для корректного отображения inline-block в FF2 нужно элементу прописать следующие стили:

display: -moz-inline-stack;
display: inline-block;

UPD 2: Но не всё так просто при использовании -moz-inline-stack. Есть несколько подводных камней, и о них вы можете прочитать на блоге CSS Guru.