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.
Материалы к изучению:
Serhiy // 26 августа 2008 в 14:45
Хотелось бы увидеть пример с использованием оптимизации expression, как описано у lusever.livejournal.com/15868.html
Flack // 26 августа 2008 в 15:07
Я не настолько силен в программировании. Лучше к lusever’у и сходить. Внес его в материалы.
Azadi // 26 августа 2008 в 18:15
Оптимизация expression сводится к тому, чтобы единожды выполнять нужный кусок кода для свойства, которое нужно использовать единожды и впоследствии не изменять. Для min-width и max-width, которые должны пересчитывать при ресайзе окна, мне кажется, неоптимизированный вариант не фатален. И, естественно, злоупотреблять expression нельзя, это может привести к подаисанию IE.
Panya // 26 августа 2008 в 20:25
expression для min/max-width не надо делать “одноразовым”, так как необходимо, чтобы он пересчитывался постоянно (конкретно, при изменении ширины окна браузера).
Fenrir // 27 августа 2008 в 06:41
Здесь “одноразовые expression” неприменимы, поскольку эти правила должны пересчитываться при любом изменении размеров.
Indie // 26 сентября 2008 в 00:22
Еще важный момент — отсутсвие полей, отступов и рамки у блока, к которому применяется expression, т. е. padding : 0; margin: 0; border: none;. Иначе IE падает все равно, так же как и при строгих операторах сравнения
Ярослав // 2 декабря 2010 в 11:51
А не проще использовать htc?
Что-то вроде:
behaviour: url(‘fixie.htc’);