max-width в Internet Explorer

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

Если мы хотим сделать страницу, которая не должна растягиваться больше определенной в пикслях (px) ширины, это очень просто:


<p style="max-width:400px;">
	какой-то текст, много текста
</p>



Если при этом использовать для просмотра такой страницы порядочные браузеры(Mozilla, Opera) - эффект от max-width будет очевиден. Содержимое параграфа при изменении размеров окна браузера будет растягиваться пока не станет равно 400px. В Internet Explorer текст будет продолжать растягиваться, даже когда его ширина превысит указанное нами значение.

Для IE воспользуемся не очень распространенным свойством expression(). Подробнее о нем можно узнать здесь. Код будет таким:


p {
	width:expression(некоторый javascript);
}

Итак, если мы напишем:


p {
	width:expression(400 + "px");
}

это будет равносильно следующему:


p {
	width:400px;
}

И, наконец, чтобы наш параграф с текстом растягивался по ширине окна браузера до 400px, а затем фиксировался и в Mozilla, и в Opera, и в InternetExplorer можно написать так:


<style type="text/css"><!--
body {
width:100%;
margin:0;
padding:0;
}
p {
max-width:400px;
width:expression(document.body.clientWidth > 400? "400px":
 "auto" );
}
//--></style>


Таким же образом можно эмулировать работу в IE свойства min-width:


p {
min-width:400px;
width:expression((document.documentElement.clientWidth
 || document.body.clientWidth) < 400? "400px":
 "auto");
}


Для свойства max-height можно сделать так:


p {
max-height:200px;
overflow:hidden;
height:expression(this.scrollHeight > 200? "200px" :
 "auto");
}


А для свойства min-height - так:


p {
min-height:200px;
overflow:hidden;
height:expression(this.scrollHeight < 200? "200px" :
 "auto");
}


Более подробно обо всем вышеописанном можно посмотреть на английском языке в статье SvendTofte "max-width in Internet Explorer".



Много комментариев (16) к “max-width в Internet Explorer”

  1. Бондарев Александр :

    Если сделать окно меньше указанного в min-width и expression значения, IE продолжает уменьшать слой и горизонтальная прокрутка не появляется.


  2. Баранов Андрей :

    да, правильнее будет так:
    p {
    min-width:400px;
    width:expression((document.documentElement.clientWidth
    || document.body.clientWidth) < 390 ? "400px" :
    "auto");
    }


  3. ten :

    Все – ничего, в чистом виде номрмально, а с рекурсией в подключенном скрипте прогружает ишак по процу.
    по отдельности работают отлично =)


  4. Bug :

    p {
    min-width:400px;
    width:expression((document.documentElement.clientWidth
    || document.body.clientWidth)


  5. Баранов Андрей :

    Для Bug:

    Обрезанный кусок кода…


  6. Серый :

    А если javascripts отключены, это работать не будет, да?


  7. Баранов Андрей :

    Для Серый:

    Разумеется.


  8. Вано :

    самое неинтересное — это что для самого BODY это не работет :(


  9. Эдик :

    Вот таки пытался селать по вашему совету max-height но ИЕ6 таки не хочет понимать.Вот думаю может в doctype проблема или в head еще что нужно прописать?


  10. Xrobak :

    А как заставить все это работать в ИЕ6 при использовании такого доктайпа:


  11. Xrobak :

    А как заставить все это работать в ИЕ6 при использовании такого доктайпа:


  12. Xrobak :

    Блин… что за тупая система комментариев, 2 раза пишу и не вставляется код, к-рый я хочу привести, ладно, извратимся иначе (убрал в доктайпе начальные и конечные символы, может хоть так покажет):

    А как заставить все это работать в ИЕ6 при использовании такого доктайпа:
    DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”


  13. Xrobak :

    Сам спросил, сам и ответил, кому интерестно, вот ссылка по теме: http://www.gunlaug.no/contents/wd_additions_14.html

    Если б еще вариант был бы со статическим шрифтом (или может это просто я чего в статье не понял)…


  14. Андрюха :

    Классный вариант кода для эксплорера. Пользуюсь работает. Правда в 6-м эксплорере лажа с padding-ами – их надо плюсовать к размеру.

    А тут столкнулся что надо сделать размер от 1000px до 1280px. Подскажите как это сделать поэлегантнее для 6-го эксплорера?


  15. Андрюха :

    Все оказалось намного проше чем я предполагал. Надо просто добавить строки

    width: expression((document.body.clientWidth 1280) ? “1280px” : “95%”);

    min-width: 1000px;
    max-width: 1280px;


  16. Селицкас Павел :

    Спасибо всем. Хороший прием… А подобным образом можно поступить в случае с max-height?



22 queries 0.181 seconds.