max-width в Internet Explorer

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

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




 какой-то текст, много текста

Если при этом использовать для просмотра такой страницы порядочные браузеры(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 можно написать так:

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


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

Для свойства 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

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



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

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

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


    2005-10-03 at 12:03 pm
  2. Баранов Андрей :

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


    2005-10-11 at 10:03 am
  3. ten :

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


    2005-10-26 at 7:55 am
  4. Bug :

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


    2005-11-29 at 1:40 pm
  5. Баранов Андрей :

    Для Bug:

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


    2005-11-29 at 3:55 pm
  6. Серый :

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


    2005-12-07 at 11:20 am
  7. Баранов Андрей :

    Для Серый:

    Разумеется.


    2005-12-07 at 11:25 am
  8. Вано :

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


    2005-12-10 at 1:59 am
  9. Эдик :

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


    2006-03-29 at 3:48 pm
  10. Xrobak :

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


    2006-10-11 at 8:00 pm
  11. Xrobak :

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


    2006-10-11 at 8:02 pm
  12. Xrobak :

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

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


    2006-10-11 at 8:04 pm
  13. Xrobak :

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

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


    2006-10-13 at 6:28 pm
  14. Андрюха :

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

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


    2007-08-02 at 6:48 pm
  15. Андрюха :

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

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

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


    2007-08-02 at 7:03 pm
  16. Селицкас Павел :

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


    2008-04-10 at 9:26 pm