Min-width в IE6

XML&HTML&CSS | 25.08.2009 |

Историческая рубрика.
Имеем атавизм в виде IE6 и непонимаемый им CSS-атрибут min-width.
Что делать?

  1. Аналогом min-width в IE6 какой-то мере выступают динамические выражения, встраиваемые в CSS. Эти выражения позволяют с помощью скриптов, написанных на языке JavaScript, менять значения стилевых параметров «на лету». Так, достаточно определить ширину окна браузера и если она меньше определенной величины, подставить новое значение ширины контейнера. Для этого следует написать следующую конструкцию. 
    width: expression(document.body.clientWidth > 420 ? "100%" : "420px")

    Вначале пишем стилевой параметр width, а после двоеточия задаем ключевое слово expression. В скобках указан так называемый тернарный оператор, он трактуется следующим образом. Если ширина окна браузера (document.body.clientWidth) больше, чем 420 пикселов, то в качестве значения width используется 100%, иначе width присваивается значение 420px. (Копипаст с htmlbook.ru)

  2. Min-width в Internet Explorer 6 и ниже можно эмулировать стилями, без обычного, в данном случае, JavaScript (в IE7 min-width работает). 
    /* min-width для остальных браузеров */
body {margin:0;padding:0;}
.outer {
  background-color:red;
  margin:0 auto;
  min-width:600px
}
/* стили для IE6 */
* html .outer {padding-left:600px}
* html .minwidth {height:0} /* holy hack для IE, что бы включить свойство hasLayout */
* html .container {margin-left:-600px;position:relative; height:0}

    HTML:

    <div class="outer">
<div class="minwidth">
<div class="container">
Блок с min-width 600 пикселей.
</div>
</div>
</div>
  3. Темы с http://www.cssplay.co.uk/boxes/minwidth.html, но я их не понял.
  4. Еще один трюк с хабра http://habrahabr.ru/blogs/webdev/68917/:

    Суть трюка проста:
    ‹table›‹tr›‹td width=1100› — максимальная ширина
    ‹div width=900 /› — распорка, минимальная ширина

    Причем именно так, ширина не у таблицы, а у ячейки. Таким образом шире, чем 1100 таблица не будет (в данном случае), но при этом если она уже — скроллер не появляется. При этом если ширина рабочей области менее 900 — скроллер уже отобразится.


Добавление комментария:

 css.php