Min-width для IE6
Дата публикации: 09.01.2009
Проблема
IE6 не понимает свойство min-width.
Решение
Метод 1 — используем expression
Пример 1 — задаем минимальную ширину основного блока в 1002 (чтобы при резиновой верстке макет не сужался при ширине окна браузере менее 1024px):
.block{
min-width: 1002px;
width:expression(document.body.clientWidth
}
Если зависает, можно пробовать изменить условие:
.block{
min-width: 1002px;
width:expression(document.body.clientWidth > 1002? "auto": "1002px" );
}
или попробовать еще вот так — задать в условии ширину на 1 больше, чем требуется:
.block{
min-width: 1002px;
width:expression(document.body.clientWidth
}
Пример 2 — задаем минимальную ширину для блока Block2, вложенного в блок Block1.
html код:
<div class="block1">
<div class="block2"></div>
</div>
css код:
.block1 {
width: 60%;
}
.block2 {
width: 50%;
min-width: 200px;
width:expression(offsetWidth
}
Этот вариант не рабочий. Нельзя привязываться к текущей ширине блока, для котрого реализуем min-width. Если есть возможность, тогда делаем расчеты относительно ширины родительского блока либо относительно ширины body:
.block2 {
width: 50%;
min-width: 200px;
width:expression(parentNode.offsetWidth
}
Плюс данного метода — простота реализации.
Недостатки данного метода:
- не всегда возможно его использовать, из-за невозможности привязки к ширине масштабируемого блока
- может подвисать браузер (IE6)
- замедляет работу браузера (IE6)
- не проходит валидацию
Метод 2 на основе CSS — два обертывающих <div>
HTML конструкция:
<div class="forh">
<div class="minwidth">
<div class="container">
...содержимое...
</div>
</div>
</div>
CSS:
.forh {
min-width: 980px;
}
* html .minwidth {
border-left: 980px solid #fff; /* min-width */
position: relative;
float: left;
z-index: 1;
}
* html .container {
margin-left: -980px; /* min-width */
position: relative;
float: left;
z-index: 2;
}
На примере видно, что часть страницы «съелась» за счет смещения основного блока влево. Чтобы этого избежать методом проб подгоняем нужные значения margin-left для блока container. Получаем:
.forh {
min-width: 980px;
}
* html .minwidth {
border-left: 980px solid #fff; /* min-width */
position: relative;
float: left;
z-index: 1;
}
* html .container {
margin-left: -960px; /* min-width */
position: relative;
float: left;
z-index: 2;
}
Смотрим результат.
Плюс данного метода — валидный код
Минусы данного метода:
- достаточно трудоемкий процесс подбора нужных значений border-left: 980px и margin-left: -980px;
- не все таким образом реализуемо
- добавляется два дополнительных дива
Метод 3 — использование Javascript
Включаем в код страницы скрипт:
<html>
<head>
<style type="text/css">
* {margin: 0; padding:0;}
#wrap {
min-width: 990px;
}
</style>
<!--[if lte IE 6]>
<script type="text/javascript">
window.attachEvent("onload", minwidth);
window.attachEvent("onresize", minwidth);
function minwidth(){ document.getElementById("wrap").style.width = (document.body.clientWidth
</script>
<![endif]-->
</head>
<body>
<div id="wrap">
...содержимое...
</div>
</body>
Плюсы данного метода:
- не подвисает браузер
- валидный код
Недостатки:
- должен быть включен Javascript
- довольно много «лишнего кода» (можно обойти ,если скрипт вынести в отдельный js файл)
Метод 4 — используем распорку
Добавляем элемент (например div или img) шириной равной минимальной.
HTML код:
<html>
<head>
<style type="text/css">
* {margin: 0; padding:0;}
body {
background: #fff;
}
.forh {
min-width:1000px;
}
.minwidth {
width: 1000px;
height: 1px;
overflow: hidden;
}
</style>
</head>
<body>
<div class="forh">
<div class="minwidth"></div>
...содержимое...
</div>
</body>
</html>
Плюс метода — простота и понятность.
Недостатки:
- фактически метод не работает — фиксируется минимальный размер блока, но элементы внутри блока все равно сжимаются демонстрация
- дополнительные пустые элементы для каждого блока, для которых нужен min-width