Установка минимальной высоты блока в Internet Explorer 6

В версии CSS 2 появилось свойство min-height, позволяющее задать минимальную высоту для блока на странице. Высота блока всегда будет НЕ меньше указанной, а при переполнении контентом блок будет расширяться. Min-height довольно часто используется при вёрстке. И всё бы хорошо, но Internet Explorer 6 не поддерживает min-height(в остальных браузерах IE >= 7, FF, Opera, Safari, Chrome всё работает). Но есть способ обойти эту проблему.

Кроссбраузерный min-height IE >= 6 и другие…

Описываем стиль

и применяем его к нужному блоку.
Опишем, что тут происходит.

Браузеры, поддерживающие свойство min-height, а это Internet Explorer >= 7, FF >= 2, Opera >= 9.2, Safari >= 2, Chrome(все версии), установят указанную минимальную высоту и высота эта будет увеличиваться при переполнении контентом.

Браузер IE 6 не поймёт и проигнорирует свойство min-height. Так же он проигнорирует height: auto !important несмотря на !important(такое вот странное поведение). Вместо этого он возьмёт следующее CSS свойство height: 500px; и установит высоту блока в 500px. При этом у IE есть особенность, даже при фиксированной высоте (или ширине) при переполнении контентом блок расширяется. Другие же браузеры при фиксированной высоте(ширине) при переполнении не расширяют блок. Вот и получается, что установка высоты для блока в IE 6 сродни min-height в остальных браузерах.

Рубрики: HTML/CSS
Понравилось? Поделись с другими плз












Комментарии ВКонтакте





Комментарии с сайта

Оставить комментарий

*