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

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

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


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

Предложения и пожелания:
Ваше имя: Ваш E-mail:
Введите изображенные цифры:
Captcha

HTML (19)

CSS (36)

PHP (21)

MySQL (14)

JavaScript (57)

Flash (6)

XML (3)

Apache (34)

Дизайн (35)

Продвижение (31)

Программы (26)

Unix (11)

Интересное (37)


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


Последние комменты:

Новые заметки:

Защита сервера от ошибок в phpMyAdmin

HTML5 - новые виды атак

Социальные рекомендации Twitter в Google

Ашманов про стартапы

Skype Distributed Database Architecture

Erlang - лекарство при высоких нагрузках

Amazon Web Services: инструменты обеспечения масштабируемости и отказоустойчивости

Обсуждения на форуме:

некорректно отображается страница в браузерах

не могу войти в admin

Нужна критика идеи

Поиск по дополнительным полям и формам

Вопрос по категориям

Несколько вопросов по проекту.

Плагины, меню и интеграция

Ошибка в тексте? Выделите её мышкой и нажмите: Ctrl + Enter| Здравствуйте, Гость | Войти | Регистрация| Карта сайта | RSS ленты
О проекте | Скачать CMS | Видеоуроки | Документация | Плагины | Форум | Идеи | Новости | Веб-мастеру | Контакты

YaPro CMS в Живом Журнале

YaPro CMS в Твитере

YaPro CMS в Одноклассниках

YaPro CMS в Яндекс.Блогах


youtube.com/watch?v=7hFivbgIEqk

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


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