Xiper

Min-width и max-width одновременно

Автор: Евгений Рыжков Дата публикации:

Проблема

IE6 не понимает min-width и max-width

Решение

Метод 1 — используем expression
.block {
min-width: 400px;
max-width: 800px;
width:expression(document.body.clientWidth > 800? "800px" : (document.body.clientWidth < 400 ? "400px" : "100%"));
}

Плюс данного метода — простота реализации.

Недостатки данного метода:

  • не всегда возможно его использовать, из-за невозможности привязки к ширине масштабируемого блока
  • может подвисать браузер (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 < 400 ? "400px" : (document.body.clientWidth > 800 ? "800px" : "100%")) };
</script>
<![endif]-->
</head>
<body>
<div id="wrap">
...содержимое...
</div>
</body>
</html>

Плюсы данного метода:

  • не подвисает браузер
  • валидный код

Недостатки:

  • должен быть включен Javascript
  • довольно много «лишнего кода» (можно обойти, если скрипт вынести в отдельный js файл)