Какое-то древнее дерьмо

Живёт тупо потому, что за хостинг уплачено на годы вперед

Семантическая верстка — советы и решения. Часть VIII. Минимальные и максимальные размеры

26 августа 2008 · Комментариев: 7 · HTML/CSS, Рецептарий

min-height

В спецификации CSS предусмотрены правила min-width/min-height и max-width/max-height. К сожалению, Internet Explorer поддерживает эти правила только начиная с седьмой версии. Однако, это ограничение можно обойти.

Свойство min-height позволяет указать минимальную высоту для элемента. Если высота содержимого элемента окажется меньше его высоты, заданной правилом min-height, то высота элемента будет установлена на основании значения правила min-height. В противном случае блок растянется по своему содержимому.

style.css:

#element {
    min-height:300px;
    }

Как говорилось выше, В IE это будет работать только в седьмой версии. К счастью, в IE есть баг в обработке правила height. По сути, height ведет себя так же как и min-height, именно на этом основан наш workaround. Обратите внимание, что мы используем «star html hack», чтобы не задавать значение height для IE 7.

ie.css:

* HTML #element {
    height:300px;
    }

Обращу ваше внимание, что при использовании height для эмуляции min-height, overflow:hidden использовать нельзя, иначе в IE height начнет работать так же, как и в нормальных браузерах.

min-width, max-width

С эмуляцией минимальной и максимальной ширины все несколько сложнее. Для этого понадобится использовать IE-only правило expression (NB: это свойство не является валидным по текущему стандарту CSS и должно использоваться через conditional comments).

Хитрость в том, что внутри expression мы можем выполнять JavaScript.

#element {
    width:expression(some javascript goes here);
    }

Для задания минимальной ширины используем следующий expression:

ie.css:

* HTML #element {
    width:expression((document.body.clientWidth||document.documentElement.clientWidth)  > 760 ? 'auto' : '760px');
    }

Для минимальной и максимальной ширины одновременно:

ie.css:

* HTML #element {
    width:expression(document.body.clientWidth<=760?'760px':(document.body.clientWidth>1100?'1100px':'100%'));
    }

Данные правила, естественно, не будут работать у пользователей с отключенным JavaScript.

Материалы к изучению:

Теги: · ·

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

  • Serhiy

    Хотелось бы увидеть пример с использованием оптимизации expression, как описано у lusever.livejournal.com/15868.html

  • Flack

    Я не настолько силен в программировании. Лучше к lusever’у и сходить. Внес его в материалы.

  • Azadi

    Оптимизация expression сводится к тому, чтобы единожды выполнять нужный кусок кода для свойства, которое нужно использовать единожды и впоследствии не изменять. Для min-width и max-width, которые должны пересчитывать при ресайзе окна, мне кажется, неоптимизированный вариант не фатален. И, естественно, злоупотреблять expression нельзя, это может привести к подаисанию IE.

  • Panya

    expression для min/max-width не надо делать “одноразовым”, так как необходимо, чтобы он пересчитывался постоянно (конкретно, при изменении ширины окна браузера).

  • Fenrir

    Здесь “одноразовые expression” неприменимы, поскольку эти правила должны пересчитываться при любом изменении размеров.

  • Indie

    Еще важный момент — отсутсвие полей, отступов и рамки у блока, к которому применяется expression, т. е. padding : 0; margin: 0; border: none;. Иначе IE падает все равно, так же как и при строгих операторах сравнения

  • Ярослав

    А не проще использовать htc?

    Что-то вроде:
    behaviour: url(‘fixie.htc’);

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