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

Оцени публикацию:
  • 7,30
Оценили человек: 7

Похожие статьи:

Справочники и учебники:


Комментарии посетителей:
  • Помогло! бесконечно благодарен!(rock)
    18 апреля 2010, 13:23 коммент полезен : 0 # Гость
  • а я для изображений которые должны быть по ширине не больше 200 пикселов, сделал себе такой класс:
    .imageMax200 {
        max-width: 200px; /* для нормальных браузеров */
        width:expression(this.clientWidth < 201? "auto" : "200px"); /* для ie */
    }
    04 июня 2010, 12:14 коммент полезен : +1 # Гость
  • Еще можно так http://savvateev.org/blog/20/
    30 июня 2010, 10:34 коммент полезен : -1 # Britva
Предложения и пожелания:
Ваше имя:
Ваш E-mail:
Сколько будет Οдин + Τри
Главная
X

youtube.com/watch?v=7hFivbgIEqk

При полном или частичном использовании материалов данного сайта, ссылка на сайт "yapro.ru" обязательна как на источник информации.
Автоматический импорт материалов и информации с сайта запрещен.
Copyrights © 2007 - 2017 YaPro.Ru

Главная » Веб-мастеру » CSS »