min-width для IE
ДваТри способа как это можно сделать в ИЕ…
min-width по нормальному
Это очевидно, так должно быть, это должно работать:
- #min-width {
- min-width:600px;
- }
Но, как вы можете легко догадаться, работает везде, кроме чего?
Правильно! Интернет Эксплорера! :)
Вступление
Здесь и дальше я буду укрощать(задавать минимальную ширину) блок #min-width.
Метод 1: JavaScript
Вот такой простенький кусок CSS (перемешанного с JS) решает проблему..
- #min-width {
- min-width:800px;
- width:expression(document.body.clientWidth < 770? "770px": "auto" );
- }
Или так например:
- * html #min-width {
- width:expression(document.body.clientWidth > 770? “100%” :”770px”);
- }
смотреть пример
Одна из проблем с этим методом описана ниже - заголок ВАЖНО!
ВАЖНО
Однако помните, что первый метод при некоторых Доктайпах вызывает подвисание IE WinXP SP1 при ресайзах окон. Смена доктайпа и еще пару примочек помогает. Например переход XHTML на HTML спасает.
Вот тут читайте подробнее - min-width, max-width re-hacked.
Метод второй: два обертывающих DIV
Этот метод потребует добавления в код двух дополнительных DIV. Примерно так:
- <div id=”min-width”>
- <div class=”minwidth”>
- <div class=”container”>
- tut ku4a texta
- </div>
- </div>
- </div>
Тогда вот такой CSS нам сымитирует min-width для IE:
- /*для всех броузеров что понимают min-width */
- #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;
- }
смотреть пример
Если вкратце: то внутрь блока помещают другой, с границей равной минимальной ширине. Который и не дает ИЕ сжимать этот блок. Более подробное описание:
Update: Метод 3: JavaScript
Для простоты приводимого кода я сделаю min-width для тэга body. Если необходимо реализовать для какого то блока - достаточно задать ID и использвать getElemetById.
Вобщем достаточно проинклюдить в страницу вот такой скрипт:
- var d = document;
- var winIE = (navigator.userAgent.indexOf(”Opera”)==-1 && (d.getElementById && d.documentElement.behaviorUrns)) ? true : false;
- function bodySize(){
- if(winIE && d.documentElement.clientWidth) {
- sObj = d.getElementsByTagName(”body”)[0].style;
- sObj.width = (d.documentElement.clientWidth<760) ? “760px” : “100%“;
- }
- }
- function init(){
- if(winIE) { bodySize(); }
- }
- onload = init;
- if(winIE) { onresize = bodySize; }
В принципе аналогично первому методу с ескпрешонами - но этот вариант исключает подвисание броузера при ресайзе - поэтому если уж бить джаваскриптом, то лучше этим - хотя за определение броузера стыдно - но такова селяви… (подсмотрено живьем тут)
Заключение
В очередной раз убеждаемся что заставить ИЕ понимать можно все. Но не всегда это очевидно и стоит того.
Попробуйте сделать в IE border шире 960 пикселей.
Весело, ага.
А что там такое страшное происходит? Интересно ж…
Ну а когда нам понадобится min-width:960px думаю ИЕ уже будет это поддерживать…
Понадобилось как-то для ширины больше 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-й самый тривиальный способ, но может и не всем интересный - вставка 1-нопиксельного прозрачного gif’а с нужной шириной. ;)
[…] временем - алистапартовская байка про time management. Бородатая но все равно актуальная. min-width для IE - обзор 3 способов как это лучше делать. Прелоад через CSS - способы подзагр […]
<—-> перед доктайпом и способ #1 рулят :)
А еще рулит изменения значения 770 на 771 например. То есть стоит поиграться +- 1 пиксел в exression - почти наверняка помогает
А как с доктайпом поиграться?Вот пытаюсь сделать max-height для блока,даже Опера(!)не понимает.(правда у меня маргины по десять процентов стоят-ну думаю наврядли они во всем виноваты).
“Поиграться” - я имел ввиду попробовать менять разные доктайпы.
А всего кода Вашего я не вижу - поэтому вряд ли могу помочь более конкретно. Смена доктайпа предназначается только для ИЕ и того джаваскриптового решения…
как все сложно….ыыыы
Самое лучшее JS-решение
http://toserveman.kalebwalton.com/articles/2006/08/02/ie-min-width-css-workaround
По поводу 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.: Автору - ОГРОМНЫЙ РЕСПЕКТ!!! Меня эта проблема давно доставала.
Лучше просто дай ссылку на рабочий пример - видать там было упоминание тага, а у меня разрешен ХТМЛ каментах.
Там есть знак “больше либо равно” и “меньше либо равно” — это он видимо «смущает» движок…
Удалите все мои предыдущие посты, пользы от них в таком виде всё равно никакой (они же одинаковые все). Ссылки на рабочий пример тоже пока нет – в разработке.
Ладно, последняя попытка (если получится тоже самое что и в предыдущих постах, удалите и этот):
[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.
Только что столкнулся с проблемой 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;
}
все работает!
А не пробовали просто изменить немного так
* html .container {
margin-left:-960px; /*-min-width*/
position:relative;
float:left;
z-index:2;
}
Зачем еще и body трогать? . :)
выход в случае с шириной больше 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; }помогло, спасибо..
> Смена доктайпа и еще пару примочек помогает. Например переход XHTML на HTML спасает.
Не может спасать переход “XHTML на HTML” - хотя бы по той простой причине, что XHTMLя в IE просто не бывает). Спасает переход из Strict mode в Quirks mode (именно это, кстати, происходит в IE6 при вставке чего угодно перед доктайпом). А все потому, что в Quirks document.body является внешним контейнером, а в Strict он сам вложен в document.documentElement, от которого и нужно “плясать”.
“Играться” с доктайпами смысла не вижу - какой из них дает какой режим рендеринга, давно известно (http://hsivonen.iki.fi/doctype/), нужно просто выбрать наиболее подходящий по результату сообразно задаче.
Простите за резкость, просто задрал уже этот миф про “волшебную букву X”…
XHTML настоящего в ИЕ нет, но смена XHTML доктайпа на HTML действительно иногда помогает, и это без quirks mode.
Мифа нет, вы попробуйте просто =) Не знаю где вы тут миф этот нашли - я уже писал о том что такое настоящий XHTML - http://cssing.org.ua/2005/02/25/xhtml-worth-or-not/ почти 3 года назад )
использовал первый метод - ширина 995px
http://avia2.mosaero.org/
теперь возникла проблема с исчезновением картинок-бэков в ИЕ, если:
1. сделать размер окна 800х600, а потом распахнуть (по Ф5 не лечится)
2. сделать размер окна 1024х768 и выше (лечится если распахнуть (и обратно))
прочитав http://xpoint.ru/forums/internet/html_css/css/thread/34023.xhtml
помогло “зум:1″ ура!
спасибо, очень помогло.
Для ширины более 960px использовал вариант tolstyj.
Только в контейнере опечатка, второй марджин предназначается естественно для правой границы.
Спасибо!
Теперь все верно, подправил его комментарий
Почему вставка однопиксельного (в высоту) div’а или gif’а не помогает?
[…] Учим ИЕ “плохому” — 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 […]
не знаю что ставит в тупик IE, но я вместо строго неравенства, поставил <=, и при этом глюк упорхнулв небытие. Во всяком случае на моём компе.
Очень интересно знать от чего есть подвисание, и если подвисание не наблюдается у меня, возможно ли оно на машине пользователя.
#all {
text-align:center;
min-width:1000px;
width:expression(((document.compatMode && document.compatMode==’CSS1Compat’) ? document.documentElement.clientWidth : document.body.clientWidth) < 1020 ? “1020px” : “auto”);
}
У меня чтои ттакой скрипт в css все пашет все супер ) но это не валидно ) что подскажите по этому поводу. ПОнимаю конечно что всем плевать на валидацию цсс, но все же.
#site{min-width:1000px;}
*html #site{
-width:1000px;
z-index:1;
height:0px;
margin:0px;
padding:0px;
background:transparent;
color:transparent;
}
мне это помогло! и без скриптов!
я подобную задачу решил пустым гифом + overflow:scroll. вроде такого:
<img alt=”" src=”empty.gif” width=”1024″ height=”0″ style=”overflow:scroll; margin:0px; padding:0px;”>
. как результат - в блоке содержащем этот гиф появляется скролбар после уменьшения ширины меньше 1024. да и вообще с overflow:scroll можно в этих целях эксперементировать. весьма просто и без инvalidности. хотя в ie из за этого могут возникнуть проблемы с отступами, но при желании они легко решаются.
[…] min-width для IE […]