min-width для IE
2 September, 2005ДваТри способа как это можно сделать в ИЕ…
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:
помогло, спасибо..
> Смена доктайпа и еще пару примочек помогает. Например переход 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 […]
# #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 в ИЕ: белая. Я заменил цвет на тот который у меня на сайте, благо это просто замена цвета. но а если это уникальный цвет, т.е. постоянно меняющийся , который нужн будет отрезать одним пикселем и повторить по всей ширине? ТО белый цвет вмешается в мои планы?
Совершенно верно, в методе проблемы когда нужен свой фон. Потому существует усложненный вариант – там 4 дива обертки, вот тут второй пример
[…] Источник материала […]
[…] Вариант с JavaScript (да и еще много всего) можно подсмотреть на cssing.org.ua/2005/09/02/min-width-for-ie […]
[…] Вариант с JavaScript (и еще много всего) можно подсмотреть на cssing.org.ua/2005/09/02/min-width-for-ie […]
min-width:1000px;
width:auto !important;
width:1000px;
И идите нахуй со своими костылями LOL
Юрий,
в ИЕ6 твой пример тупо задает фиксированную ширину, так что можешь сам пойти ;)
Что означает запись * html в css ?
Мы знакомы всего несколько минут, но кажется, я люблю вас =))
Спасибо за статью.
Очень во время помогли.
На дворе конец 2009 года, в ходу ie8. за 4 года max-width так и не заработал.
март 2010-ого..нано технологии стремительно рвуться вперёд. max-width по прежнему не работает
39. Александр
“Что означает запись * html в css?”
– Це відсічка на Internet Explorer 6. Тобто стрічка яка починається з * html буде зрозуміла тільки IE6
# 17 мне помог, спс большое
[…] min-width для IE Теги: ie […]
Вот еще один способ http://savvateev.org/blog/20/
Спасибо, все отлично, вот только примеры куда-то сбежали =)
Немного оффтоп, но использованное словосочетания “такова селяви” – указывает на незнание автором перевода французского выражения “c’est la vie” и, как следствие, автор строит неправильные словосочетания с этой фразой.
c’est la vie – “такова жизнь”. В итоге получаем “такова такова жизнь” – глупость.
Правильный вариант употребить просто “се ля ви”. Или уже “такова la vie”, но никак не то, что написал автор.
Exactly =)
Спасибо я прекрасно знаю его значение, для того и использую этот тавталогичный каламбур. Я наивно полагал что значение слов “се ля ви” достаточно очевидно для всех, чтобы с ним можно было шутить :)
Конец 2011 года)) Все еще с костылями)) Эту страницу нужно отправить в майкрософт)))
Начало 2013 года, исследуем Марс, покуда всё Ок :), а ie6 всё еще даёт о себе знать :( Интересно, Била икота не замучила?
Вчера Я выиграл кэш в этом
уважаемом клубе
Here is my blog: на реальные деньги или бесплатно (invulcan.com)
Год назад Я вывел деньги в этом любимом казино
Here is my homepage – эмуляторы на деньги
В прошлый Новый год Я выиграл бабло
в этом любимом онлайн-казино
Feel free to surf to my webpage: игровые
Пару лет назад Я выиграл кэш в этом
онлайн-клубе
Feel free to visit my page :: Казино Вулкан Платинум
Несколько лет назад Я сорвал куш в этом уважаемом казино
Also visit my website: бонусы в Джои казино
1 год назад Я выиграл тысячи в этом современном клубе
Feel free to surf to my blog азино777
играть онлайн получить [https://fms777.ru]
Давным-давно Я стал миллионером в этом современном казино
My blog – азино777 официальный сайт отзывы
Оставить комментарий