Дата публикации: 10.01.2009
Последнее обновление: 31.01.2009
Проблема
IE6 не понимает min-width и max-width
Решение
Метод 1 — используем expression
.block {
min-width: 400px;
max-width: 800px;
width:expression(document.body.clientWidth > 800? "800px" : (document.body.clientWidth
}
Плюс данного метода — простота реализации.
Недостатки данного метода:
- не всегда возможно его использовать, из-за невозможности привязки к ширине масштабируемого блока
- может подвисать браузер (IE6)
- замедляет работу браузера (IE6)
- требует включенного Javascript
- не проходит валидацию
Метод 2 — используем Javascript
Включаем в код страницы скрипт:
<html>
<head>
<style type="text/css">
* {margin: 0; padding:0;}
#wrap {
min-width: 400px;
max-width: 800px;
}
</style>
<!--[if lte IE 6]>
<script type="text/javascript">
window.attachEvent("onload", mmwidth);
window.attachEvent("onresize", mmwidth);
function mmwidth(){
document.getElementById("wrap").style.width = (document.body.clientWidth 800 ? "800px" : "100%")) };
</script>
<![endif]-->
</head>
<body>
<div
id="wrap">
...содержимое...
</div>
</body>
</html>
Плюсы данного метода:
- не подвисает браузер
- валидный код
Недостатки:
- должен быть включен Javascript
- довольно много «лишнего кода» (можно обойти, если скрипт вынести в отдельный js файл)
Теги: баги IE6