min-width для IE

2 September, 2005

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

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

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;
  3. function bodySize(){
  4. if(winIE && d.documentElement.clientWidth) {
  5. sObj = d.getElementsByTagName(“body”)[0].style;
  6. sObj.width = (d.documentElement.clientWidth<760) ? “760px” : “100%“;
  7. }
  8. }
  9. function init(){
  10. if(winIE) { bodySize(); }
  11. }
  12. onload = init;
  13. if(winIE) { onresize = bodySize; }

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

Заключение

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

Все ссылки

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

51 комментариев к “min-width для IE”

edgy | 1. 5 September, 2005

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

akella | 2. 5 September, 2005

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

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

kost | 3. 23 September, 2005

Понадобилось как-то для ширины больше 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) с этим все нормально.

gam | 4. 10 October, 2005

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

cssing :: Архив :: cssing 2005 | 5. 27 December, 2005

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

grlm | 6. 21 February, 2006

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

akella | 7. 26 February, 2006

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

эдик | 8. 30 March, 2006

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

akella | 9. 30 March, 2006

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

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

wil | 10. 14 April, 2006

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

faxenoff | 11. 27 August, 2006

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

Script | 12. 28 August, 2006

По поводу 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.: Автору – ОГРОМНЫЙ РЕСПЕКТ!!! Меня эта проблема давно доставала.

akella | 13. 16 February, 2007

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

[e]Bu$ter | 14. 17 February, 2007

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

Ладно, последняя попытка (если получится тоже самое что и в предыдущих постах, удалите и этот):
[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.

Cybersurfer | 15. 22 February, 2007

Только что столкнулся с проблемой 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;
}
все работает!

CTAJIKEP | 16. 21 March, 2007

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

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

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

tolstyj | 17. 17 May, 2007

выход в случае с шириной больше 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; 
  }
nick | 18. 4 September, 2007

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

SelenIT | 19. 12 December, 2007

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

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

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

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

akella | 20. 12 December, 2007

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

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

Wakh | 21. 13 January, 2008

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

Wakh | 22. 14 January, 2008

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

mrAdamoff | 23. 18 March, 2008

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

akella | 24. 19 March, 2008

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

Webych | 25. 31 March, 2008

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

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

[…] Учим ИЕ “плохому” — 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 April, 2008

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

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

Фдучфтвук | 28. 7 June, 2008

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

Kor-Elf | 29. 24 June, 2008

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

Jony | 30. 14 July, 2008

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

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

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

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

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

Женя | 32. 11 October, 2008

# #min-width {
# width:50%;
# min-width:400px;
# }
# /* для IE */
# * html .minwidth {
# border-left:400px solid #fff;/*min-width*/
# position:relative;
# float:left;
# z-index:1;
# }
# * html .container {
# margin-left:-400px; /*-min-width*/
# position:relative;
# float:left;
# z-index:2;
# }
У меня вопрос по поводу второго метода. Я его использовал. Все супер. Но вот тоько фон моей рабочей зоны которая в .winwidth в ИЕ: белая. Я заменил цвет на тот который у меня на сайте, благо это просто замена цвета. но а если это уникальный цвет, т.е. постоянно меняющийся , который нужн будет отрезать одним пикселем и повторить по всей ширине? ТО белый цвет вмешается в мои планы?

akella | 33. 11 October, 2008

Совершенно верно, в методе проблемы когда нужен свой фон. Потому существует усложненный вариант – там 4 дива обертки, вот тут второй пример

Эмуляция min-width, max-width под IE6 | ZODIOS.net | 34. 8 November, 2008

[…] Источник материала […]

min-width в Internet Explorer | HTML-CODER.ORG.RU | 35. 12 December, 2008

[…] Вариант с JavaScript (да и еще много всего) можно подсмотреть на cssing.org.ua/2005/09/02/min-width-for-ie […]

min-width в Internet Explorer | HTML-CODER.ORG.RU | 36. 10 January, 2009

[…] Вариант с JavaScript (и еще много всего) можно подсмотреть на cssing.org.ua/2005/09/02/min-width-for-ie […]

Юрий | 37. 31 January, 2009

min-width:1000px;
width:auto !important;
width:1000px;

И идите нахуй со своими костылями LOL

рус | 38. 25 April, 2009

Юрий,
в ИЕ6 твой пример тупо задает фиксированную ширину, так что можешь сам пойти ;)

Александр | 39. 28 May, 2009

Что означает запись * html в css ?

Евгений | 40. 10 July, 2009

Мы знакомы всего несколько минут, но кажется, я люблю вас =))
Спасибо за статью.
Очень во время помогли.

Ilya | 41. 25 November, 2009

На дворе конец 2009 года, в ходу ie8. за 4 года max-width так и не заработал.

askari | 42. 4 April, 2010

март 2010-ого..нано технологии стремительно рвуться вперёд. max-width по прежнему не работает

Magentoua | 43. 19 April, 2010

39. Александр
“Что означает запись * html в css?”
– Це відсічка на Internet Explorer 6. Тобто стрічка яка починається з * html буде зрозуміла тільки IE6

Олег | 44. 25 May, 2010

# 17 мне помог, спс большое

min-width для IE | Искусство создания и продвижения сайтов | 45. 29 June, 2010

[…] min-width для IE Теги:  ie […]

Олег | 46. 30 June, 2010

Вот еще один способ http://savvateev.org/blog/20/

Виталий Капля | 47. 11 August, 2010

Спасибо, все отлично, вот только примеры куда-то сбежали =)

DeathBloom | 48. 5 November, 2010

Немного оффтоп, но использованное словосочетания “такова селяви” – указывает на незнание автором перевода французского выражения “c’est la vie” и, как следствие, автор строит неправильные словосочетания с этой фразой.
c’est la vie – “такова жизнь”. В итоге получаем “такова такова жизнь” – глупость.
Правильный вариант употребить просто “се ля ви”. Или уже “такова la vie”, но никак не то, что написал автор.

akella | 49. 5 November, 2010

В итоге получаем “такова такова жизнь” – глупость.

Exactly =)
Спасибо я прекрасно знаю его значение, для того и использую этот тавталогичный каламбур. Я наивно полагал что значение слов “се ля ви” достаточно очевидно для всех, чтобы с ним можно было шутить :)

Елена | 50. 15 September, 2011

Конец 2011 года)) Все еще с костылями)) Эту страницу нужно отправить в майкрософт)))

Songo | 51. 1 January, 2013

Начало 2013 года, исследуем Марс, покуда всё Ок :), а ie6 всё еще даёт о себе знать :( Интересно, Била икота не замучила?

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