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