Кроссбраузерное использование display:inline-block;
Среда, Март 4, 2009 16:08Рубрики: Web-developer
В предыдущем посту Табличные элементы без таблиц рассматривался интересный пример использования 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>
<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*/
}
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*/
}
Вариант кроссбраузерный!
Только во втором фоксе стоит помучаться с положением картинок и текста...
Спасибо за код .
Вы можете следить за любыми ответами на эту запись через RSS 2.0 feed.
Вы можете оставить ответ, или trackback с Вашего собственного сайта.
Loading ...
kozlovski сообщил:
Апрель 15th, 2009 9:09
Если внутри всего этого счастья вставить ссылку, то в ff она не будет работать.