Кроссбраузерное использование display:inline-block;

В предыдущем посту Табличные элементы без таблиц рассматривался интересный пример использования display:inline-block;. Как заметил rmaksim, firefox 2 не поддерживает этот стиль.

По официальным данным, firefox 2 уже не поддерживается. Однако пока есть простаки, которые еще не переходят на нвые версии, приходится пользоваться тяжелой техникой борьбы с браузерами.

Я приведу пример, которые был использован в предыдущем посте, только модернизированный.

HTML:
<ul>
<li>
<img src="photo.jpg" width="75" height="75" alt="« />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</li>
</ul>

CSS(с комментариями):
li {
width: 130px;/* Ширина блоков */
border: 1px solid #ссс; /* Обрамление блоков */
margin: 5px; /* Отступы извне */
padding: 5px; /* Отступы внутри */
vertical-align: top; /* Вертикальное выравнивание по верху */display:-moz-inline-stack;/*Для мозиллы Firefox*/display:inline-block; /*Не применяется в IE и Firefox*/
_overflow:hidden;/*фикс для IE6*/
zoom:1;/*включаем hasLayout*/
*display:inline;/*при hasLayout true display:inline ведёт себя как display:inline-block*/
}

Вариант кроссбраузерный!

Только во втором фоксе стоит помучаться с положением картинок и текста..

Спасибо за код HedgerWow.

Комментарии — Один комментарий

  1. #805 kozlovski в 9:09, 15 апреля 2009: (подписался)

    Ответить | Цитировать

    Если внутри всего этого счастья вставить ссылку, то в ff она не будет работать.

Добавить комментарий

имя:

e-mail:

сайт:

текст:

Subscribe without commenting