2 сентября, 2005

min-width для IE

ДваТри способа как это можно сделать в ИЕ…

min-width по нормальному

Это очевидно, так должно быть, это должно работать:

  1. #min-width {
  2. min-width:600px;
  3. }

Но, как вы можете легко догадаться, работает везде, кроме чего?
Правильно! Интернет Эксплорера! :)

Вступление

Здесь и дальше я буду укрощать(задавать минимальную ширину) блок #min-width.

Метод 1: JavaScript

Вот такой простенький кусок CSS (перемешанного с JS) решает проблему..

  1. #min-width {
  2. min-width:800px;
  3. width:expression(document.body.clientWidth < 770? "770px": "auto" );
  4. }

Или так например:

  1. * html #min-width {
  2. width:expression(document.body.clientWidth > 770? “100%” :”770px”);
  3. }

смотреть пример
Одна из проблем с этим методом описана ниже - заголок ВАЖНО!

ВАЖНО

Однако помните, что первый метод при некоторых Доктайпах вызывает подвисание IE WinXP SP1 при ресайзах окон. Смена доктайпа и еще пару примочек помогает. Например переход XHTML на HTML спасает.
Вот тут читайте подробнее - min-width, max-width re-hacked.

Метод второй: два обертывающих DIV

Этот метод потребует добавления в код двух дополнительных DIV. Примерно так:

  1. <div id=”min-width”>
  2. <div class=”minwidth”>
  3. <div class=”container”>
  4. tut ku4a texta
  5. </div>
  6. </div>
  7. </div>

Тогда вот такой CSS нам сымитирует min-width для IE:

  1. /*для всех броузеров что понимают min-width */
  2. #min-width {
  3. width:50%;
  4. min-width:400px;
  5. }
  6. /* для IE */
  7. * html .minwidth {
  8. border-left:400px solid #fff;/*min-width*/
  9. position:relative;
  10. float:left;
  11. z-index:1;
  12. }
  13. * html .container {
  14. margin-left:-400px; /*-min-width*/
  15. position:relative;
  16. float:left;
  17. z-index:2;
  18. }

смотреть пример
Если вкратце: то внутрь блока помещают другой, с границей равной минимальной ширине. Который и не дает ИЕ сжимать этот блок. Более подробное описание:

Update: Метод 3: JavaScript

Для простоты приводимого кода я сделаю min-width для тэга body. Если необходимо реализовать для какого то блока - достаточно задать ID и использвать getElemetById.

Вобщем достаточно проинклюдить в страницу вот такой скрипт:

  1. var d = document;
  2. var winIE = (navigator.userAgent.indexOf(”Opera”)==-1 && (d.getElementById && d.documentElement.behaviorUrns)) ? true : false;
  4. function bodySize(){
  5. if(winIE && d.documentElement.clientWidth) {
  6. sObj = d.getElementsByTagName(”body”)[0].style;
  7. sObj.width = (d.documentElement.clientWidth<760) ? “760px” : “100%“;
  8. }
  9. }
  11. function init(){
  12. if(winIE) { bodySize(); }
  13. }
  14. onload = init;
  15. if(winIE) { onresize = bodySize; }

В принципе аналогично первому методу с ескпрешонами - но этот вариант исключает подвисание броузера при ресайзе - поэтому если уж бить джаваскриптом, то лучше этим - хотя за определение броузера стыдно - но такова селяви… (подсмотрено живьем тут)

Заключение

В очередной раз убеждаемся что заставить ИЕ понимать можно все. Но не всегда это очевидно и стоит того.

Все ссылки

XHTML/CSS, Полезности

Комментарии(31) к “min-width для IE”

1. 5 сентября | edgy

Попробуйте сделать в IE border шире 960 пикселей.
Весело, ага.

2. 5 сентября | akella

А что там такое страшное происходит? Интересно ж…

Ну а когда нам понадобится min-width:960px думаю ИЕ уже будет это поддерживать…

3. 23 сентября | kost

Понадобилось как-то для ширины больше 960px. А то некоторые «дезайниры» считают, что людей с браузером открытым меньше чем в 1024×768 уже нет.

При min-width > 960 px в IE6 контент сползает влево на ширину, равную min-width-960. Причем в IE5 этого не наблюдается (если мне не изменяет память).

На сайте http://www.cssplay.co.uk/ когда-то были комментарии, я спросил, ответили, что в transparent варианте (http://www.cssplay.co.uk/boxes/min-widthSn.html) с этим все нормально.

4. 10 октября | gam

Ну и 4-й самый тривиальный способ, но может и не всем интересный - вставка 1-нопиксельного прозрачного gif’а с нужной шириной. ;)

5. 27 декабря | cssing :: Архив :: cssing 2005

[…] временем - алистапартовская байка про time management. Бородатая но все равно актуальная. min-width для IE - обзор 3 способов как это лучше делать. Прелоад через CSS - способы подзагр […]

6. 21 февраля | grlm

<—-> перед доктайпом и способ #1 рулят :)

7. 26 февраля | akella

А еще рулит изменения значения 770 на 771 например. То есть стоит поиграться +- 1 пиксел в exression - почти наверняка помогает

8. 30 марта | эдик

А как с доктайпом поиграться?Вот пытаюсь сделать max-height для блока,даже Опера(!)не понимает.(правда у меня маргины по десять процентов стоят-ну думаю наврядли они во всем виноваты).

9. 30 марта | akella

“Поиграться” - я имел ввиду попробовать менять разные доктайпы.

А всего кода Вашего я не вижу - поэтому вряд ли могу помочь более конкретно. Смена доктайпа предназначается только для ИЕ и того джаваскриптового решения…

10. 14 апреля | wil

как все сложно….ыыыы

11. 27 августа | faxenoff

Самое лучшее JS-решение
http://toserveman.kalebwalton.com/articles/2006/08/02/ie-min-width-css-workaround

12. 28 августа | Script

По поводу 3-го поста (насчёт min-width > 960 px):
Тоже столкнулся с такой проблемой при использовании 2-го способа, описанного в данной статье, и решил её простым добавлением _margin-left: “min-width-960px” в body, и всё стало зашибись! =)
т.е. получилось такое:
body {
min-width: 997px;
margin: 0;
_margin-left: 37px;
padding: 0;
}

P.S.: Автору - ОГРОМНЫЙ РЕСПЕКТ!!! Меня эта проблема давно доставала.

13. 16 февраля | akella

Лучше просто дай ссылку на рабочий пример - видать там было упоминание тага, а у меня разрешен ХТМЛ каментах.

14. 17 февраля | [e]Bu$ter

Там есть знак “больше либо равно” и “меньше либо равно” — это он видимо «смущает» движок…
Удалите все мои предыдущие посты, пользы от них в таком виде всё равно никакой (они же одинаковые все). Ссылки на рабочий пример тоже пока нет – в разработке.

Ладно, последняя попытка (если получится тоже самое что и в предыдущих постах, удалите и этот):
[code]
function bodySize(){
sObj = document.getElementsByTagName(”body”)[0].style;
if (document.documentElement.clientWidth<=760) {
sObj.width = “600px”;
} else if (document.documentElement.clientWidth>=1100) {
sObj.width = “900px”;
} else {
sObj.width = “80%”;
}
}

if(navigator.appName == “Microsoft Internet Explorer”) {
onresize = bodySize;
onload = bodySize;
}
[/code]

Смысл такой: body всегда занимает 80% от ширины окна в диапазоне ширины окна от 760px и до 1100px. Как только ширина окна выходит из заданного диапазона, растягивание (или сжатие) body в IE прекращается. Проще говоря, сей костыль реализует подержку min-width и max-width в IE.

15. 22 февраля | Cybersurfer

Только что столкнулся с проблемой min-width > 960 px, решение действительно работает по схеме “двух обертывающих дивов” просто если используется min-width> 960 то из min-width вычитаем 960 и пишем получившуюся цифру в margin-left для body.
Пример:
* html body{
margin: 0 0 0 40px;
}
/*для всех броузеров что понимают min-width */
#min-width {
min-width:1000px;
}
/* для IE */
* html .minwidth {
border-left:1000px solid #fff;/*min-width*/
position:relative;
float:left;
z-index:1;
}
* html .container {
margin-left:-1000px; /*-min-width*/
position:relative;
float:left;
z-index:2;
}
все работает!

16. 21 марта | CTAJIKEP

А не пробовали просто изменить немного так

* html .container {
margin-left:-960px; /*-min-width*/
position:relative;
float:left;
z-index:2;
}

Зачем еще и body трогать? . :)

17. 17 мая | tolstyj

выход в случае с шириной больше 960px:

/*для всех броузеров что понимают min-width */
#min-width {
  min-width:1000px;
  }
/* для IE */
* html .minwidth {
  border-left:960px solid #fff;
  border-right:40px solid #fff;/*min-width-960*/
  position:relative;
  float:left;
  z-index:1;
  }
* html .container {
  margin-left:-960px; /*-min-width*/
  margin-right:-40px; /*-(min-width-960)*/
  position:relative;
  float:left;
  z-index:2;
  }
18. 4 сентября | nick

помогло, спасибо..

19. 12 декабря | SelenIT

> Смена доктайпа и еще пару примочек помогает. Например переход XHTML на HTML спасает.

Не может спасать переход “XHTML на HTML” - хотя бы по той простой причине, что XHTMLя в IE просто не бывает). Спасает переход из Strict mode в Quirks mode (именно это, кстати, происходит в IE6 при вставке чего угодно перед доктайпом). А все потому, что в Quirks document.body является внешним контейнером, а в Strict он сам вложен в document.documentElement, от которого и нужно “плясать”.

“Играться” с доктайпами смысла не вижу - какой из них дает какой режим рендеринга, давно известно (http://hsivonen.iki.fi/doctype/), нужно просто выбрать наиболее подходящий по результату сообразно задаче.

Простите за резкость, просто задрал уже этот миф про “волшебную букву X”…

20. 12 декабря | akella

XHTML настоящего в ИЕ нет, но смена XHTML доктайпа на HTML действительно иногда помогает, и это без quirks mode.

Мифа нет, вы попробуйте просто =) Не знаю где вы тут миф этот нашли - я уже писал о том что такое настоящий XHTML - http://cssing.org.ua/2005/02/25/xhtml-worth-or-not/ почти 3 года назад )

21. 13 января | Wakh

использовал первый метод - ширина 995px
http://avia2.mosaero.org/
теперь возникла проблема с исчезновением картинок-бэков в ИЕ, если:
1. сделать размер окна 800х600, а потом распахнуть (по Ф5 не лечится)
2. сделать размер окна 1024х768 и выше (лечится если распахнуть (и обратно))

22. 14 января | Wakh

прочитав http://xpoint.ru/forums/internet/html_css/css/thread/34023.xhtml
помогло “зум:1″ ура!

23. 18 марта | mrAdamoff

спасибо, очень помогло.
Для ширины более 960px использовал вариант tolstyj.
Только в контейнере опечатка, второй марджин предназначается естественно для правой границы.

24. 19 марта | akella

Спасибо!
Теперь все верно, подправил его комментарий

25. 31 марта | Webych

Почему вставка однопиксельного (в высоту) div’а или gif’а не помогает?

26. 6 апреля | CSS XHTML “Шпаргалка на промокашке” « Студия AlterEgo. Блог

[…] Учим ИЕ “плохому” — min-width, max-width * «min-width для IE» (cssing.org.ua/2005/09/02/..) * «max-width в Internet Explorer» (xhtml.ru/2005/06/11/max-w..) * «min-width for Internet […]

27. 28 апреля | Санча

не знаю что ставит в тупик IE, но я вместо строго неравенства, поставил <=, и при этом глюк упорхнулв небытие. Во всяком случае на моём компе.

Очень интересно знать от чего есть подвисание, и если подвисание не наблюдается у меня, возможно ли оно на машине пользователя.

28. 7 июня | Фдучфтвук

#all {
text-align:center;
min-width:1000px;
width:expression(((document.compatMode && document.compatMode==’CSS1Compat’) ? document.documentElement.clientWidth : document.body.clientWidth) < 1020 ? “1020px” : “auto”);
}
У меня чтои ттакой скрипт в css все пашет все супер ) но это не валидно ) что подскажите по этому поводу. ПОнимаю конечно что всем плевать на валидацию цсс, но все же.

29. 24 июня | Kor-Elf

#site{min-width:1000px;}
*html #site{
-width:1000px;
z-index:1;
height:0px;
margin:0px;
padding:0px;
background:transparent;
color:transparent;
}
мне это помогло! и без скриптов!

30. 14 июля | Jony

я подобную задачу решил пустым гифом + overflow:scroll. вроде такого:

<img alt=”" src=”empty.gif” width=”1024″ height=”0″ style=”overflow:scroll; margin:0px; padding:0px;”>

. как результат - в блоке содержащем этот гиф появляется скролбар после уменьшения ширины меньше 1024. да и вообще с overflow:scroll можно в этих целях эксперементировать. весьма просто и без инvalidности. хотя в ie из за этого могут возникнуть проблемы с отступами, но при желании они легко решаются.

31. 26 августа | Семантическая верстка — советы и решения. Часть VIII. Минимальные и максимальные размеры

[…] min-width для IE […]

Оставить комментарий

Комментировать

Обязательные поля

Ссылки

Последние 5