В предыдущем посту Табличные элементы без таблиц рассматривался интересный пример использования 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.
Ответить | Цитировать