Каскадные Таблицы Стилей

индекс

324,89

В очередной раз про min-width для IE6

Об этом способе задания min-width для IE6 без экспрешенов знал давно, но не использовал из-за громозкости конструкций.

<div id="outer"> <div class="minwidth"> <div class="container"> Контент </div> </div> </div>

Как видно имеем три вложенных контейнера там, где в принципе нужен один. Немного подумал, и получилось обойтись одним элементом:

<div class="container"> Контент </div>

CSS для IE 6 следующий:

html{ _padding-left: 1000px; } body{ _zoom: 1; } .container{ _margin-left: -1000px; _zoom: 1; _position: relative; }

В результате имеем часто необходимый min-width главного контейнера для IE6 без экспрешенов и без лишних элементов. Ничего нового, но думаю пригодится.
Пример
UPD. Контейнеру нельзя задавать width и height иначе верстка разваливается. Т.е. этот вариант не для липкого футера.

+59

15 мая 2009, 19:36

145

dyakov

комментарии (58)

+17

akira 15 мая 2009, 20:11 #

Господи! Да хватит уже пинать этот труп! Когда же о нем все забудут :(

+20

dyakov 15 мая 2009, 20:22 # ↑

Я конечно за. Но думаю еще пару лет с этим браузером считаться придется. По крайней мере на крупных коммерческих проектах.

zeroed 16 мая 2009, 02:28 # ↑

В корпорациях точно придется ковыряться еще не один год, т.к. там это дефолтный браузер и никто ничего изменять не хочет: куча сайтов уже написаны.

BleSSeD 16 мая 2009, 21:36 # ↑

Я думаю что пока не умрет ХР, не умрет и ИЕ6 :(

ambientos 15 мая 2009, 21:59 # ↑

Не вижу ничего плохого, если верстальщик позаботится о нормальном отображении и в IE 6.
А вот те, кто только кричать умеют, мол, у меня хороший браузер, а у вас — говно, — вот такие пусть и идут лесом. Юзеру откровенно наплевать, под какие браузеры вы затачиваете верстку, в большинстве случаев он понятия не имеет, чем же так плох ИЕ, как вы верстали страницу, блоками или таблицами и валидна ли она.

azproduction 15 мая 2009, 23:53 # ↑

Исходя из жизненного опыта, рядовые юзеры, боятся слова бр-р-раузер. Для них, что браузер, что маузер =) Темболее ставить какой-то другой, когда есть родной Веб-обозреватель 6.
Считаю вполне уместным вывести сообщение об ограниченной поддержке функционала, ну и написать мануал по замене браузера. С версткой такое, конечно, не проидет.

–1

almalexa 16 мая 2009, 05:30 # ↑

Когда в разговоре с рядовым юзером я сказал «браузер», меня попросили не ругаться :/

timonstr 15 мая 2009, 23:54 # ↑

Откройте macheist.com в ие :). Создателям этого сайта в голову не могло прийти, что его вообще кто-то откроет в ие.

stas_ik 16 мая 2009, 01:08 # ↑

Правильно. Ведь сайт явно делался для маководов

timonstr 16 мая 2009, 01:24 # ↑

Та это-то понятно. Но я пример привел не случайно. Все о той же теме, что нам приходится зачастую учитывать и ие. На тот же макхейст я могу зайти из какого-нибудь интернет-кафе, где есть только ие. Просто, чтобы узнать что там нового.
Брр, пора спать.

stas_ik 16 мая 2009, 01:32 # ↑

Ну что-то мне подсказывает, что посетителей с IE6 у этого сайта меньше 10%, возможно даже в разы 8)

timonstr 16 мая 2009, 01:33 # ↑

Да я ж не спорю :)

piumosso 19 июня 2009, 16:36 # ↑

Правильно подметили. Конечно, дивная верстка имеет свои объективные преимущества, но это — внутренняя кухня, которая не должна волновать пользователей.

aps 16 мая 2009, 21:25 # ↑

15% пользователей — это больше чем у хрома с сафари вместе взятых.

–2

Be3 15 мая 2009, 21:13 #

Придется считаться, если такие как Вы будут поддерживать этот билд.
Нужно просто забыть этот страшный сон и идти дальше.

Carry 15 мая 2009, 21:44 # ↑

Не всегда есть возможность отказаться от поддержки IE6 т.к. делаешь не для себя.
А даже если и для себя, то приходится думать и о пользователях. А в моей статистике доля IE6 все еще 21%
Конечно, хочется надеяться что через год доля IE6 упадет хотя бы в два раза.

–11

Be3 15 мая 2009, 21:48 # ↑

В моей статистике IE6 нет, поэтому я рассуждаю так критично. Пользователи IE6 болваны, которые не видят дальше своего носа, они вам нужны? Они приносят вам деньги? Но в итоге, вы страдаете от них…

flacon 15 мая 2009, 22:01 # ↑

Не всегда деньги приносят «пользователи IE6». Бывает еще деньги платят заказчики. А у них может стоять IE6. Такие себе «болваны» с деньгами.

Carry 15 мая 2009, 22:07 # ↑

Не то, чтобы пользователи болваны, просто в моем случае мало компьютерно-грамотных.
Вот Opera — 28%, но ее пользователи по большей части ничуть не более IT-грамотнее тех, у которых IE6, просто больше любят эксперименты.

А на счет страдания — меня особо не напрягает. А вот заказчик будет напрягать если будут жалобы.

Ambiens 15 мая 2009, 22:04 # ↑

Зачем так все усложнять?
Во-первых, не обязательно поддерживать все нюансы для IE6. Старый браузер, значит нет гарантии, что все тонкости будут работать.
Во-вторых, есть методы реализации поддержки всяких тонкостей через JS.

Carry 15 мая 2009, 22:17 # ↑

Когда активных IE6 станет около 5%, тогда так и буду делать — лишь бы пользоваться можно было.

На самом деле у всех разработчиков разные взгляды на это. Только я считаю что веб-разработчики мало влияют на процент старых браузеров.
Даже пропаганда (реклама) других браузеров на таких крупных сайтах как Yandex и Google не особо помогает.

Вот если бы они писали что-нибудь вроде «IT-шник! обнови браузер своим друзьям и знакомым!» или «Админ! обнови браузеры в своей конторе!» Мож тогда бы заметно помогло.

Ambiens 15 мая 2009, 22:36 # ↑

Да я-то в принципе и не спорю, что для большинства проектов его поддерживать пока необходимо. Хотя на некоторые тонкости уже можно забить. И последнее время стараюсь не вводить в html код лишние элементы, необходимые только для IE6. Просто если нужна поддержка, то подключаю отдельный css в котором многое реализую через js (например min-width и :first-child) и не трачу времени на невероятные хаки.
А доля IE6, судя по динамике, должна к началу следующего года упасть до того уровня, что на него можно будет окончательно забивать (в большинстве случаях).

alekciy 15 мая 2009, 23:48 # ↑

>«IT-шник! обнови браузер своим друзьям и знакомым!» или «Админ! обнови браузеры в своей
>конторе!»

Патриоты радеющие за IT давно уже так и делают :D

Ох не один десяток новых пользователей оперы и лисы своим появление в сети именно на этих браузерах мне )

not_ice 16 мая 2009, 12:19 # ↑

я удивился, когда увидел в статистике одного из поддерживаемых мной сайтов несколько посещений с ИЕ4)) я даже не могу представить, ни откуда этот мамонт взялся, ни как сайт в нем выглядит, и как вообще этот человек по инету в нем серфит )

flaresun 16 мая 2009, 15:32 # ↑

Посмотреть как выглядит сайт в разных браузерах можно здесь. Можно увидеть много интересного :)

–1

flaresun 16 мая 2009, 00:41 # ↑

Зная и умея применить подобные «особенности» вёрстки сделать нормальную поддержку большинства браузеров не сложно. Если всё сделано ещё и валидно, то имеется больше шансов, что ваш сайт в будущем будет корректно отображаться под новыми версиями браузеров.
Никто никого не призывает заниматься «никрофилией», но если добавив три строчки кода можно получить совместимость с ещё одним пюраузером, то что тут плохого и зачем шуметь по этому поводу…

flaresun 16 мая 2009, 15:30 # ↑

*… с ещё одним Браузером,…

Consul 15 мая 2009, 21:16 #

в топике, в тегах запятые поставьте пожалуйсто.

dyakov 15 мая 2009, 21:29 # ↑

Сделано)

MTonly 15 мая 2009, 21:35 #

У метода есть небольшой недостаток — непредсказуемым образом вылезающие в отдельных случаях 30 (кажется; давно не использовал) пикселов слева. JS-решение в этом плане более стабильно.

GMile 15 мая 2009, 21:46 #

http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
Там пишут, что можно просто для нужного блока указать:

_height: 250px;<pre>

GMile 15 мая 2009, 21:47 # ↑

woops, там о height…

прошу прощения, неверно прочитал )

–6

homm 15 мая 2009, 21:49 #

А что просто указать нужный width для эксплорера уже не работает? В силу особенностей движка для него как раз
min-width = width
min-height = height
а указать реальные width и height в нем нету.

flacon 15 мая 2009, 22:03 # ↑

вы не понимаете разницы.

pepelsbey 15 мая 2009, 22:08 # ↑

Не увлекайтесь аналогиями, width в IE6 — это width, а height — это min-height.
Т.е. блок будет растягиваться в высоту, если не описан какой-нибудь overflow, а в ширину не будет.

–1

homm 15 мая 2009, 23:42 # ↑

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

А вот автору следовало бы поподробнее рассказать, что за магию он применяет. Откуда цифра 1000px, зачем релатив. Да и этот грязный хак с подчеркиванием… брр.

–1

pepelsbey 15 мая 2009, 23:50 # ↑

Гм. Да — запутался. Ширина и правда так же работает.

Вопрос в том, что для резинового в ширину блока нельзя указывать ширину, иначе он станет фиксированным. А поскольку в высоту блоки очень редко бывают резиновыми, то такой трюк срабатывает.

dyakov 16 мая 2009, 12:21 # ↑

1000px — нужная нам минимальная ширина.
отрицательный margin без position: relative + hasLayout не работает (содержимое такого блока не видно)
Вместо хака с подчеркиванием, можно применять любой способ скармливания стилей IE6, например Условные комментарии.

differentlocal 15 мая 2009, 22:01 #

Что характерно — вокруг IE6 все бегают кругами, «как бы его не сломать», а вот про нормальную поддержку Firefox или Safari, да и вообще не-windows систем половина забывает.

–1

flacon 15 мая 2009, 22:02 # ↑

а вы статистику использования браузеров видели? я сам поразился…

pepelsbey 15 мая 2009, 22:09 #

Чем сложнее макет, чем больше чудовищных размеров полей и отступов, тем он непредсказуемее. Нынешние 25% IE6 заслуживают простого JS-решения. Имхо, конечно.

m1kola 16 мая 2009, 00:37 # ↑

Согласен.

Но если заказчик требует сделать поддержку ie6 без js, то этот способ пригодится.
Хотя у меня такого в ТЗ небыло. Не разу…

homm 16 мая 2009, 00:42 # ↑

Знаете, найти бы такого заказчика и плюнуть ему в рожу. Когда нужно отображение в ие6 — это понятно. Но когда нужно что-то сделать стоя на табуретке с завязанными глазами и связанными руками, я в такие игры не играю.

m1kola 16 мая 2009, 14:55 # ↑

Ну почему?
Часто можно решить проблемы дополнительным css.

Если бы заказчик просил сделать поддержку прозрачности png без js… То да… Хотя в рожу бы не плювал, а предложил бы сделать js только для IE. Если бы закаазчик не согласился, то просто отказался бы от выполнения проекта.

PS: Но при свободе выбора я бы решил проблему с min-width через js.

fomichev 16 мая 2009, 11:23 # ↑

А что за JS-решение, про которое тут многие упоминают?

dyakov 16 мая 2009, 12:25 # ↑

.container {

width: expression(body.clientWidth>1000 ? "auto" : "1000px");

}

Gero 15 мая 2009, 22:14 #

К сожалению, max-width в этом духе сделать не поулчится, а он обычно на пару с min-width используется.

dyakov 16 мая 2009, 12:25 # ↑

Это да.

vittore 15 мая 2009, 22:26 #

вообще интересный глюк нашел в ие
минимальную ширину не получается сделать больше 927 что ли пикселей, иначе уезжает все налево

–1

Panya 15 мая 2009, 23:53 #

Вот еще бы _ убрать ;)

quark 16 мая 2009, 00:47 # ↑

* html{
    padding-left: 1000px;
}
* html body{
    zoom: 1;
}
* html .container{
    margin-left: -1000px;
    zoom: 1;
    position: relative;
}

–9

Dr_Logic 16 мая 2009, 00:05 #

Как же это один контейнер, если вы используете три? html и body просто есть априори.

Sabiko 16 мая 2009, 05:34 # ↑

Вопрос в том, чтобы не создавать лишних контейнеров специально под задачу, а не в их формальном количестиве.

Dr_Logic 18 мая 2009, 20:29 # ↑

а если min-width надо указать элементу, глубже чем html>body? Этот метод разве сработает?
Не знаю… Слишком много условностей. Это же ясно что одни и те же элементы можно в разных задачах верстки использовать.

dyakov 19 мая 2009, 09:32 # ↑

Нет не сработает. Только для главного контейнера.

RussianSpy 16 мая 2009, 15:38 #

А чем не устраивает известная связка

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

Та же самая эмуляция min-width совместимая со всеми браузерами

dyakov 16 мая 2009, 18:09 # ↑

Вы перепутали с min-height
min-width так не получить

ElaSTiC 4 июня 2009, 10:02 #

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

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.