Блог > Html/Css верстка > Кроссбраузерный min-width, max-width и min-height, max-height {

Кроссбраузерный min-width, max-width и min-height, max-height}

предыдущая следующая

min-width - позволяет установить минимальную ширину элемента.

Суть проблемы в том, что наш "любимый" Ie6 не понимает эти свойства. Ниже опишем несколько кроссбраузерных способов.

Первый способ

.class{ min-width:100px; width: auto !important; width: 100px; }

Второй способ

_width:expression(document.body.clientWidth < 100? "100px": "auto");

Третий способ

<div class="outer">
<div class="minwidth">
<div class="container">
Блок с min-width 100 пикселей.
</div>
</div>
</div>

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

Четвертый способ

Четвертый способ предполагает использовать Javascript (данный скрипт поддерживает min-width; max-width; min-height; max-height)

Что касается max-width; min-height; max-height, - эти свойства работают точно по такому же принципу. Единственное,стоит упомянуть об одновременном использовании максимальной и минимальной ширины и высоты. Обычно в таких случаях используются expression (для IE6). Как всегда могут возникнуть подвисания браузера. Ниже приведены 2 варианта реализации.

_width:expression(document.body.clientWidth > 800? "800px" : (document.body.clientWidth < 400 ? "400px" : "100%"));

Вариант через Javascript более предпочтительный с точки зрения производительности, но заставляет писать лишние строчки кода.

Какой способ выбрать? Хороший вопрос? Конечно стоит смотреть на задачу и однозначно сказать очень трудно. В большинстве случаев используем expression. Но Все способы имеют право на жизнь:)

Дерзайте))) А лучше ВЕРСТАЙТЕ)))

предыдущая следующая

Комментарии: