Кроссбраузерный display: inline-block; - CodeHelper

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

2

Как обеспечить полную поддержку display: inline-block; в IE 6(7) и FF2? Вопрос я думаю актуальный, так как часто возникает при реализации горизонтального меню.

Новые ответы

Новые Лучшие

2

Для решения проблемы нужно элементу присвоить display: inline; zoom: 1;. С помощью zoom: 1; мы присваиваем элементу hasLayout.

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

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

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

То есть стиль должен выглядеть как то так:

.inline-block {
  display:-moz-inline-stack; /* for FF2*/
  display:inline-block; /* normal browsers */
  zoom:1; /* for IE (hasLayout true) */
  *display:inline; /* for IE */
}

Взято отсюда

Вот ещё одна заметка о кроссбраузерном использовании inline-block


v1.7.123.556
© 2009—2010 CodeHelper FAQ | О сайте | Обратная связь | История изменений | Статьи
Creative Commons LicenseМатериалы сайта распространяются под лицензией Creative Commons Attribution-Share Alike 3.0 Unported.