min-width, max-width, min-height, max-height

Узнаем как задать значения минимальной или максимальной ширины и высоты

Суть проблемы

Браузер Internet Explorer не понимает свойства css min-width, max-width, min-height и max-height.

Решение проблемы

Вот так задаем блоку:

минимальную ширину, например 222 пикселов:

#block {
     min-width: 222px; /* для нормальных браузеров */
     width:expression(document.body.clientWidth > 222? "100%" :"222px"); /* для ie */
}

максимальную ширину, например 555 пикселов:

#block {
     max-width: 222px; /* для нормальных браузеров */
     width:expression(document.body.clientWidth > 555? "555px" : "auto"); /* для ie */
}

минимальную 222 и максимальную 555 ширину сразу, одновременно:

#block {
     min-width: 555px; /* для нормальных браузеров */
     max-width: 555px; /* для нормальных браузеров */   
     width:expression(document.body.clientWidth < 222? "222px" : document.body.clientWidth > 555? "555px" : "auto"); /* для ie */
}

минимальную высоту, например 111px:

#block {
     min-height: 111px; /* для нормальных браузеров */
     -height: 111px /* для ie6 достаточно этого, т.к. он воспринимает свойство "height" как min-height */
     min-height: 111px;
     height:auto !important;
     height:111px; /* последние 3 строчки — для ie7 */
}

Сопутствующие неприятности

Даже при использовании трюков с min-width ie 6.0 не всегда правильно отображает блок при изменении размеров окна. Тем не менее при открытии или обновлении страницы всё выглядит так, как надо. Так что будем считать этот хак работающим.

Источник: yanajy.com


25.03.2010 10:10

Комментарии

Помогло! бесконечно благодарен! (rock)
18.04.2010 13:23
а я для изображений которые должны быть по ширине не больше 200 пикселов, сделал себе такой класс:
.imageMax200 {
    max-width: 200px; /* для нормальных браузеров */
    width:expression(this.clientWidth < 201? "auto" : "200px"); /* для ie */
}
04.06.2010 12:14
Еще можно так http://savvateev.org/blog/20/
Britva | 30.06.2010 10:34