среда, 31 марта 2010 г.

min-width, min-height, max-width и max-height в IE 6

Про это очень много написано. В Internet Explorer 6 и ниже нет поддержки CSS-атрибутов min-* и max-*. Но, например, атрибут height часто ведет себя как min-height, позволяя растягивать контейнер вслед за контентом. Однако для абсолютно позиционированных элементов это не так и тут придется искать другое решение. Придется воспользоваться расширением CSS от Microsoft под названием expression, позволяющим создавать вычисляемые CSS-атрибуты. Всё просто: определяем, какая высота у нашего элемента и если она больше лимита, ограничиваем ее фиксированным значением.

Итак, решение для min-height:
#div1 {
    /* IE 6 */
    height: expression(this.scrollHeight < 50 ? "50px" : "auto");
    /* Other browsers */
    min-height: 50px;
}
max-height:
#div1 {
    /* IE 6: */
    height: expression(this.scrollHeight > 50 ? "50px" : "auto");
    /* Other browsers: */
    max-height: 50px;
}
min-width:
#div1 {
    /* IE 6: */
    width: expression(this.scrollWidth < 50 ? "50px" : "auto");
    /* Other browsers: */
    min-width: 50px;
}
max-width:
#div1 {
    /* IE 6: */
    width: expression(this.scrollWidth > 50 ? "50px" : "auto");
    /* Other browsers: */
    max-width: 50px;
}
Смешанное решение для min-width и max-width:
#div1 {
    /* IE 6: */
    width: expression(this.scrollWidth < 50 ? "50px" : (this.scrollWidth > 100 : "100px" : "auto"));
    /* Other browsers: */
    min-width: 50px;
    max-width: 100px;
}

Комментариев нет:

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