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 в коде отсутствует.


<div class="width">
 <div class="minwidth">
  <div class="layout">
   <div class="container">
    <div class="content">
     
<h3>{width:60%; min-width:350px;}
для Internet Explorer</h3>
<p>Этот блок шириной 60% имеет
минимальную ширину 350px.<br />
Ширина блока указывается в процентах,
а минимальная ширина в px или em.</p>

    </div>
   </div>
  </div>
 </div>
</div>

CSS для примера

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


<style type="text/css">
.width {
  width:60%;
  min-width:350px;
}

.content {
  border:1px solid #F60;
  padding:5px;
}

* html .minwidth {
  padding-left:350px;
}

* html .container {
  margin-left:-350px;
  position:relative;
}

/*\*/
* html .minwidth,
* html .container,
* html .content,
* html .layout {
  height:1px;
}
/**/

</style>

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

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

Сделать CSS  %



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



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

  1. Elwe :

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

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


  2. Mons :

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

    for ie only code

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


  3. Mons :

    Fuck…
    <!–[if lt ie 7.0]>–>
    for ie only
    <[endif]–>


  4. Mons :

    дубль 3:
    <!–-[if lt ie 7.0]>


  5. Максим Россомахин :

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


  6. Rryk :

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

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


  7. EVILdoer :

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


  8. Alinaki :

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

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


  9. anton :

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


  10. Николай :

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


  11. Николай :

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

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


  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 не прет насколько я понял из сказанного.


  13. win :

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

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


  14. Ilya :

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



22 queries 0.170 seconds.