Ответить на комментарий
CSS: max/min Height и Width в Internet Explorer
Свершилось чудо: оказывается, что max/min-height и max/min-width можно использовать в Internet Explorer!
В частности, используя преимущество атрибутики CSS в IE - возможность использования expression, - Вы можете заставить IE выводить нужную Вам высоту и ширину. CSS атрибут expression позволяет использование JavaScript команд в IE.
JavaScript и CSS вместе? Благодарим Мелкомягких!
Почему же это так замечательно? Да потому, что в других, стандартно-компилируемых браузерах (в отличие от IE), параметры max/min-height и max/min-width выполняются стандартами CSS..
-
<div style="max-width: 333px;">
-
[Содержимое этого блока будет максимум в 333px по высоте в стандартно-компилируемых браузерах]
-
</div>
Конечно, это слишком легко для разработчиков Internet Explorer! И поэтому данный аттрибут (max-width) просто не выполняется. К счастью, IE поддерживает свой собственный атрибут expression, который позволяет нам использовать JavaScript expression'ы для манипуляции со свойствами HTML-документа, такими как max-width и max-height. Для примера, чтобы задать значение аттрибуту через expression, делаем так:
-
div {
-
width: expression(333 + "px");
-
}
-
-
..что соответствует:
-
-
div {
-
width: 333px;
-
}
Негативная сторона использования expression-аттрибутики в IE, заключается в том, что если JavaScript принудительно выключен пользователем в настройках браузера, то данный способ не будет работать. Однако использование max/min ширины/высоты (также как и других параметров) является важным инструментом web-разработок. Поэтому, закрывая глаза на недостаток, покажем несколько базовых способов для задания max/min параметров через expression
max-width в IE
Этот метод проверен в IE6 и должен, по идее, работать в IE5. Просто измените параметры по своему усмотрению (приведенный код комментирован пояснениями) и используйте в своих разработках. В данном примере, мы указали max-width равным 777px - в первой строчке для IE, и второй - для других браузеров со стандартной компиляцией:
-
* html div#division {
-
width: expression( document.body.clientWidth > 776 ? "777px" : "auto" ); /* задает max-width для IE */
-
max-width: 777px; /* указывает max-width для браузеров со стандартной компиляцией */
-
}
А в этом примере, мы задали max-width равным 33em, для IE и прочих браузеров:
-
* html div#division {
-
width: expression( document.body.clientWidth > (500/12) * parseInt(document.body.currentStyle.fontSize) ? "33em" : "auto" ); /* задает max-width для IE */
-
max-width: 33em; /* устанавливает max-width для браузеров со стандартной компиляцией */
-
}
min-width в IE
-
* html div#division {
-
width: expression( document.body.clientWidth < 334 ? "333px" : "auto" ); /* задает min-width для IE */
-
min-width: 333px; /* указывает max-width для браузеров со стандартной компиляцией */
-
}
max-height в IE
-
* html div#division {
-
height: expression( this.scrollHeight > 332 ? "333px" : "auto" ); /* задает max-height для IE */
-
max-height: 333px; /* указывает max-height для браузеров со стандартной компиляцией */
-
}
min-height в IE
-
* html div#division {
-
height: expression( this.scrollHeight < 334 ? "333px" : "auto" ); /* задает min-height для IE */
-
min-height: 333px; /* указывает min-height для браузеров со стандартной компиляцией */
-
}