CSS свойство min-width в Internet Explorer 5…6

Как известно, за 8 лет существования CSS2 разработчики Internet Explorer так и не сподобились научить своего монстра понимать многие полезные CSS-свойства, среди которых есть min-width - минимальная ширина. На подходе уже IE7, в котором наконец будут работать и min-width, и max-width. Но несколько лет верстки с учетом капризов IE5-6 у нас еще впереди. Поэтому далее будет небольшой пример, который призовет этот браузер к порядку без применения нестандартного expression().

{width:60%; min-width:350px;} для Internet Explorer

Этот блок шириной 60% имеет минимальную ширину 350px.
Ширина блока указывается в процентах, а минимальная ширина в px или em.

ширина блока 350px

HTML-код примера

Здесь приводится только html-код блока, в отношении которого применяется свойство min-width. Блок шириной 350px в коде отсутствует.




 

  

   

    

     

{width:60%; min-width:350px;}
для Internet Explorer


Этот блок шириной 60% имеет
минимальную ширину 350px.

Ширина блока указывается в процентах,
а минимальная ширина в px или em.

CSS для примера

Здесь также не приводится описание стилей для блока шриной 350px, потому что он в примере используется только в качестве линейки.

Чтобы не запутаться

Введите необходимые значения ширины (width) и минимальной ширины (min-width) блока, не забудьте указать единицы измерения ширины и получите готовый CSS. Останется лишь скопировать HTML и CSS (см. выше). Также хочу заметить, что

и соответствующий селектор в CSS к делу не относятся, их можно убрать. Они в примере лишь для наглядности.
Сделать CSS  %



Подробно, по шагам и на английском языке на webreference.com



Много комментариев (14) к “CSS свойство min-width в Internet Explorer 5…6”

  1. Elwe :

    один див + нестандартный expression() всё таки лучше наверное, чем 5 дивов..

    в любом случае, спасибо)


    2006-06-05 at 6:38 pm
  2. Mons :

    Особенно если учесть, что IE понимает такую штуку, как

    for ie only code

    то мы можем верстать валидный код, применяя для “инвалидного” браузера хаки.
    без всяких дурацких *\*, * html, и т.п.


    2006-06-09 at 9:43 pm
  3. Mons :

    Fuck…
    –>
    for ie only


    2006-06-09 at 9:45 pm
  4. Mons :

    дубль 3:


    2006-06-09 at 9:59 pm
  5. Максим Россомахин :

    К чёрту бэкслэши. Условные комментарии — вот путь к порядку.


    2006-06-11 at 9:32 am
  6. Rryk :

    Самый простой способ писать мульти-браузерный CSS – это ставить вначале сайта JavaScript с выбором файла CSS и не парить себе мозги.

    > один див + нестандартный expression() всё таки лучше наверное, чем 5 дивов..
    Я тоже так думаю. Расскажите, пожалуйста, поподробнее про нестандартный expression().


    2007-02-19 at 4:33 am
  7. EVILdoer :

    в этом случае в ie6
    невозможно выделить текст мышкой
    как минимум :)


    2007-05-22 at 5:20 pm
  8. Alinaki :

    http://doxdesk.com/software/js/minmax.html

    Мне подошел только этот вариант. Только он смог обработать dl-dt-dd


    2007-07-12 at 2:43 am
  9. anton :

    re Rryk
    вот пример использования нестандартного expression():
    { min-width: 970px; width:expression(document.body.clientWidth


    2007-07-12 at 1:45 pm
  10. Николай :

    Попробовал использовать пример – помогло. Единственное, в IE высота блоков оказывается минимальной, если у них выставлено height:100%. Это из-за того, что у блоков .container, .content и др. в примере фиксированная высота 1px. Сделать высоту 100% для этих блоков не получается, т.к. нарушается верстка. В опере9 всё работает. Как быть с IE ?


    2007-10-02 at 11:00 am
  11. Николай :

    Смог справиться только написав вместо height:1px height:expression(document.body.clientHeight)

    но там все равно проблемы есть при изменении размеров окна в Opera 9 и IE 6


    2007-10-04 at 11:18 am
  12. Yubari :

    Alinaki :

    This script makes these CSS properties work transparently in IE version 5.0 upwards on all platforms except Mac. (For tedious technical reasons there is nothing can be done for IE/Mac, sorry.)

    То есть данная штука под MAC не прет насколько я понял из сказанного.


    2008-02-16 at 3:15 am
  13. win :

    Комрады, не парьтесь!
    Чтобы сделать кроссбраузерный min-width в контейнер добавляется такая хрень:
    > height = 0px>
    Только не забываем этому img отменить всякие отступы.

    удачи в вёрстке!


    2008-06-04 at 5:25 pm
  14. Ilya :

    Какому img и причем тут height = 0px???


    2008-08-06 at 1:02 pm