Главная/ Собираем HTML и CSS приемы/ HTML и CSS приемы, интересные решения/ Glyuki Brauzerov/ Ie6/ Max-width для IE6 | описание 2-х способов

Max-width для IE6

Дата публикации: 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 файл)
Теги:
Показать комментарии