Блог Дяговченко Сергея » Статьи » Вёрстка (XHTML+CSS) » Делаем высоту блока в IE-6 меньше 20px

Как верстальщик часто сталкивался с ситуацией, когда необходима высота блока меньше 20px. Так как, пока что (думаю, осталось не долго :) ), при вёрстке все еще необходимо учитывать баги IE6, то эта проблема все еще актуальна.

Проблема

Если XHTML шаблон требует от нас высоту некоторого div блока меньше 20px, то следующий код для IE6 не играет никакой роли. Блок будет показан с высотой в 20px, не смотря на конкретно указаную высоту в 10px.

<div style="height:10px;background-color:red">&nbsp;</div>

Решения

1. Пожалуй, самый простой и эффективный - и, по сути, способ, которым пользуюсь, - это вставка XHTML комментария в блок, т.е.:

<div style="height:10px; background-color:yellow"><!-- --></div>

2. Добавить неразрывный пробел &nbsp; в середину блока и CSS описание font-size:1px; line-height:0:

<div style="height:10px; font-size:1px; line-height:0; background-color:green">&nbsp;</div>
 

Возможно есть еще способы (добавлю, по мере нахождения), но, как я уже писал, первый является самым простым и эффективным. Также, стоить отметить, что приведенные способы являются кросс-браузерными, так что, проблем с другими браузерами не должно возникнуть.

Источник: http://archivist.incutio.com/viewlist/css-discuss/39150.

Вернуться