Min-width для IE6

Подготовил: Евгений Рыжков Дата публикации: 09.01.2009
Последнее обновление: 31.01.2009

Проблема

IE6 не понимает свойство min-width.

Решение

Метод 1 — используем expression

Пример 1 — задаем минимальную ширину основного блока в 1002 (чтобы при резиновой верстке макет не сужался при ширине окна браузере менее 1024px):

.block{
min-width: 1002px;
width:expression(document.body.clientWidth < 1002? "1002px": "auto" );
}

Если зависает, можно пробовать изменить условие:

.block{
min-width: 1002px;
width:expression(document.body.clientWidth > 1002? "auto": "1002px" );
}

или попробовать еще вот так — задать в условии ширину на 1 больше, чем требуется:

.block{
min-width: 1002px;
width:expression(document.body.clientWidth < 1003? "1002px": "auto" );
}

Пример 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 < 200 ? "200px" : "60%" );
}

Этот вариант не рабочий. Нельзя привязываться к текущей ширине блока, для котрого реализуем min-width. Если есть возможность, тогда делаем расчеты относительно ширины родительского блока либо относительно ширины body:

.block2 {
width: 50%;
min-width: 200px;
width:expression(parentNode.offsetWidth < 400 ? "200px" : "60%" );
}

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

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

  • не всегда возможно его использовать, из-за невозможности привязки к ширине масштабируемого блока
  • может подвисать браузер (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 < 990 ? "990px" : "100%") };
</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
Теги:
Показать комментарии