Магия для IE

11 Nov, 2005

Ни для кого не секрет что у интернет эксплорера полным полно разнообразных багов в поддержке CSS. Тот кто немного успел поверстать поймет - что часто большая часть времени уходит именно на их решение(а то и поиск), а не на саму верстку. Жаловаться на ИЕ и опускать руки тут бесполезно - он пока остается самым популярным броузером. Часто меня спасали эти несколько простых приемов.

Откуда магия

Большинство из этих магическик свойств напрямую связаны со свойством ИЕ - hasLayout. Оно принципиально влияет на отображаемые ИЕ блоки. Вот это я и называю шаманством.

position:relative

Иногда родительские блоки с position:relative; просто перекрывают свои "внутренности" - в таких случаях спасает это свойство - для исчезнувшего блока. Вдобавок оно является одним из признаков по которому ИЕ наделяет блок hasLayout.

Второе использование связано с отрицательными отступами. Если вы когда нибудь их использовали, и этот элемент выходил за пределы родительского блока - то часть вышедшая за пределы была попросту невидима в ИЕ. Выход тот же - position:relative; и все видно.

И что самое главноe, абсолютно безвреден для других броузеров. (если вы внутри этого блока не используете position:absolute;)

height:0

Это мое любимое. Если юзать как _height:0 - безвредно для всех. Воистину чудотворное свойство. Во первых блок растянется чтобы охватить все внутренние FLOAT блоки. То бишь никаких div class="clear" и тп для ИЕ уже не нужно выходит.

Более того это свойство зарещает этому блоку обтекать что-либо. (подробнее здесь)

Вдобавок этот же хак(в этом варианте известный как Holly Hack) с height: 1%(что по сути то же самое) - позволяет побороть 3х пиксельную проблему у ИЕ.

Секрет в том, что если ИЕ видит высоту 0, он все-таки растягивает блок настолько сколько внутри контента - но при этом считает высоту заданной!. :) Что и добавляет блоку тот самый hasLayout. Ну чем не шаманство?

Короче height:0 для ИЕ - самое то. Я советую приправлять его "The Underscore Hack" (хак с подчеркиванием).

Еще

Еще свойства которые могут помочь (имеют отношение к hasLayout):
  • display:inline display:inline-block
  • zoom:1
  • position: absolute
  • writing-mode: tb-rl

Как применять

Естественно - хотя и некоторые свойства безвредны - другие стоит все же спрятать от остальных броузеров. Можно это делать так: (в <head>)
  1. <!‒‒[if lt IE 7]><style>
  2. /* стили для IE 6 + IE5.5 + IE5.0 */
  3. .gainlayout { height: 0; }
  4. </style><![endif]‒‒>
это называется conditional comments Ну и все тот же хак:
  1. #for-iewin-only{
  2. _height:0;
  3. }
Свойство увидят только ИЕ под винду.

в конце

Просто полезно иметь под рукой пару свойств, которые не раз меня выручали. Иногда просто в отчаянии и надеясь на удачу можно поприменять их к чему-попало.

Начинающим правда это не рекомендуется - так как часто то, что им кажется глюком на самом деле есть правильное отображение. Лучший выход сравнивать отображение в ИЕ, Опере и Файрфоксе. Если Опера и Мозилла все показывают нормально, а ИЕ глючит - скорее всего можно смело применять хаки.

Желательно все же знать самые распространенные глюки которыми грешит этот броузер.

Конечно хаки это зло - но с помощью некоторых методов мы можем их спрятать так что они не смогут принести вреда в будущем и никак не пересекутся с другими "нормальными" CSS-свойствами.

Ссылки

А вы что думаете про хаки?

34 комментариев к “Магия для IE”

1.tobto_ | 12 Nov, 2005
хакм - это каки. я сегодня у америкозов встретил ссылки на статьи, типа - "IE5 - goodbye!", т.е. коллеги переходят на поддержку новой серии броузеров: IE7, Op9, Ff1.5,... Это означает (ура!) полную поддержку CSS2, HttpRequest технологий, которые с Большим удовольствием работают в новых рамках этих изделий. Итого, вместо того, чтобы писать "Support FF", нужно писать "Support Web2.0", а тем, кто не понимает происходящего (т.е. упорно снимает уе с бедных и не очень граждан, производя кальку с помощью дримвивера и считая это верхом дизигна), следует читать морали по поводу того, что English - великая вещь. Идем читать исходники - прямо на блоги разработчиков Ff, Op, IE. И не прикидывайтесь, что впереди сессия. Наступает великая технология рсс - нету преподов, газет, тактильности изданий. Есть инициатива, непосредственность контента, отсутствие надзора. Как говорил классик - "Читайте первоисточники". Addio.
2.Кай | 12 Nov, 2005
2 tobto: То, что кто-то перешёл на ИЕ7, совершенно не значит, что ИЕ6 сразу же исчёзнет у всех остальных. Теперь эти вумные дядьки будут и дальше строчить свои новые статьи, а большинство людей только начнёт приглядываться к ИЕ7 и перейдет на него очень даже не скоро. И поэтому различные хаки умными людей будут ещё использоваться.
3.Vladson | 12 Nov, 2005
Глобальный переход на IE6 случился только когда WinXP потерял "зелёную" болезнь а Win98 безнадёжно устарел, думаю переход IE7 будет примерно таким-же (я прогнозировал бы это примерно в 2008-м году)
4.ganges | 12 Nov, 2005
Я использую html > body #something в отдельном файле Это и не хак в общем-то В других пока, за исключением height:1%; небыло надобности Совет - все хаки в отдельный файл - рулит.
5.uggallery | 12 Nov, 2005
В большинстве случаев выбор прост: либо хаки, либо - дополнительная разметка, лишние дивы и спаны. Хаки - прелесть. Правильно настроить систему хаков - большое удовольствие. Когда браузеры начнут одинаково поддерживать стандарты, верстка превратится в рутину. И все-таки, каждый раз когда новые технологии позволяют отказаться от очередного хака, я вздыхаю с облегчением. Такие вот противоречия. Спасибо за интересный материал, надо будет изучить его получше.
6.akella | 12 Nov, 2005
А теперь еще ж добавилась головная боль с хаками под ИЕ7: http://www.positioniseverything.net/articles/ie7-dehacker.html Вообще мое мнение - надо их как можно сильнее обезопасивать - типа conditional comments - что бы они оставались рабочими и в будущем. А то сколько хаков полетело после выхода ИЕ7... :( А до вступления в ИЕ 7 еще прийдется ждать :(. Хотя на ИЕ5-5.5 и я уже стал "слегка" не обращать внимания. (не на суперпосещаемых ресурсах конечно)
7.Kildor | 12 Nov, 2005
В примерах в разделе „Как применять” Условные комментарии — по моему дефисы потерялись… Надо же вроде как?
8.Kildor | 12 Nov, 2005
грр… <!--[if lt ie 7]><![endif]-->
9.Vladson | 12 Nov, 2005
Блин пора уже делать заглушки Я как-то в 98-м году зашёл на сайт Audi через IE3 а мне вылезла страничка что сайт просматривается только с IE4 и выше, и никаких ссылок кроме windows-update. Это и побудило меня переходить с Win95 на Win98 (98SE ещё не было) вот думаю если посещаемые сайты (например mail.ru или yandex) начнут делать так-же только относительно всех IE то в полку Оперных-Лисичек прибудет... Я почему всё это говорю, зашёл я тут через IE5.0 на одну свою страничку, так её так перекосило что я чуть не долбанулся :) оказалось что там text-align взялся чёрт знает от куда и вставился чёрт знает куда, пришлось пол CSS переписывать чтоб везде работало... Так что однозначно нафиг IE если сайт людям интересен то пусть и смотрят его нормальными браузерами, а если им лень Ёперу или Лисичку ставить, то либо пошли такие посетители куда подальше, либо пусть хоть ради того чтоб сайт почитать встанут на путь истенный.
10.ganges | 13 Nov, 2005
2Vladson Nope 2Akella Почитал вчерашние ссылки и понял, что хак с > селектором надо выключать :) Конд Коммент работает
11.Эргэл | 14 Nov, 2005
Есть один очень простой способ борьбы с несовместимостью броузеров: XHTML-валидатор + CSS-валидатор. Валидная страница отображается одинаково правильно во всех броузерах, даже в Опере. Исключение только одно: IE known bugs. Вот тут-то и нужны хаки. В закладки!
12.Блогово Дракона &raquo; Фокусы CSS | 14 Nov, 2005
[...] и Как убрать нестыковки повторяющихся фонов Rollover на CSS без жырных жабаскрипов UPD: Магия для IE - полезные хаки. см. также:Определитель шрифта - [...]
13.Vladson | 14 Nov, 2005
Ув.Эргэл, ваш способ улетает в трубу если сделать сайт хоть немного сложнее красной страницы с зелёной надписью "Драсте я Вася Пупкин" причём в IE отоброжается вовсе как повезёт, а в остальных зависит от многих факторов (не забывайте, не у всех посетителей Опера под Windows, есть люди сидящие на маках и никсах)
14.Александр | 14 Nov, 2005
Ув. Владсон, позвольте несогласиться. С вашим подходом мы снова вернемся к надписям "Сайт оптимизирован для просмотра в FF1.5, а IE идет лесом". Мне приходися делать сайты много, очень много сложнее, чем зеленым по красному. И подход Эргэла меня спасает, причем спасает он и страницу от разваливания в IE 4.01. Да, вот так вот, представьте себе. Но ваш метод отбрасывания неугодных браузеров тоже имеет преимущества: не надо хаки изучать, можно даже, наверное, и стандарты не читать и пользоваться исключительно жалким плагинчиком FF (WebDeveloper). Akella, спасибо за интересную статейку
15.akella | 14 Nov, 2005
@Kildor: вордресс преобразует, гад... @Vladson: ну сказать 70% процентам людей - мол меняйте броузер - тоже совсем некрасиво. Они это воспримут точно как мы надпись "работает в ИЕ 6 и выше". И мы будем ничем не лучше. Александр абсолютно прав. @Эргэл: Да ты прав - но иногда еще нет нет да и встретится какая нибудь разность под линукс или МАК. Хотя от этого как правило помогают не хаки - а просто избежание некоторых "стремных" свойств.
16.Vladson | 14 Nov, 2005
>>> ну сказать 70% процентам людей - мол меняйте броузер Мне так на AUDI сказали и я воспринял это как должное и обновился... (хотя я не просто браузер обновил а вовсе ось, так что данный случай ещё более менее "добрый")
17.Эpгэл | 14 Nov, 2005
Забыл отметить важную деталь: я свой способ проверял только на CSS-дизайне, а не табличном не проверял. Точнее пытался, но давно очень, и не смог тогда свои таблицы завалидировать. Vladson, не надо ставить этот способ с головы на ноги! В IE дизайн надо "дорабатывать напильником", потому что known bugs. Валидация позволяет всего лишь избежать оптимизации сайта ещё для пары десятков броузеров, да и под IE означает половину работы.
18.DenD | 28 Nov, 2005
_height: 0; ведет как-то странно себя. _height: 1%; не решает проблем в двухколоночных лэйаутах с двумя флоатами, так что <div class="clear">> пока рулит
19.akella | 28 Nov, 2005
ведет как-то странно себя.
Как это странно? Сделай один блок без указанной ширины. Помести в него ФЛОАТ блок. Тогда внешний не растянется до флоата. Добавляешь _height: 0; все рабоатет. (в ие) Тут ведь главное хоть один триггер для hasLayout употребить - высота ширина - релэйтив... Просто иногда ширину нельзя точно задавать... А насчет <div class=”clear”> - так я про них уже забыл - употребляй overflow:hidden или overflow:visible - для обрамляющего флоаты блока. Лишнего кода не будет... Смотри заметку - Как я делаю две колонки - там в посте и комментах есть. И в примерах тоже кстати.
20.maximum | 07 Dec, 2005
Ребята, что то вы чушь полную порите, ИЕ как раз основной браузер, а не Мозилла. Нечего винить ИЕ в кривости, её у него нет. Просто если не умеете дизайнить.. Вот и всё. Нефик шаблоны под мозиллу переделывать.
21.akella | 07 Dec, 2005
К сожалению кривость есть :). Это не предмет спора, а лишь факт. Единственное его преимущество - массовость. На этом собссно все.
22.Tyler | 27 Dec, 2005
Переходите на Firefox или Opera :)
23.ddvhouse | 16 Feb, 2007
Мне в некоторых случаях помогает прописать исключение для IE7: *+html #div {height:auto} Поидее auto должно автоматом стоять, но как оказалось у IE7 не всегда. IE7, на мой взгляд, сыроват вышел: косяки типа height:1px поправили, а стандарт для этой альтернаттвы display:table не добавили. :( Лучше б тогда вообще всё как в IE6 оставили...
24.Wave | 10 Dec, 2009
К сожалению, не всегда работает. Имеется: картинка с релятивной позицией, сдвинутая вверх на сколько-то. Всё, что вверх, отсекается. Всевозможные overflow: visible; zoom: 1; float: left; position: relative; height:1%; _height:0; родительских дивов вплоть до самого верхнего, который сдвинут на 20 пикселей влево, и даже вплоть до body — не могут вернуть пропавшую часть картинки. IE6-7. Футер тоже пропал, но его я смог вернуть условным комментарием, где всё, что не осёл, сдвигает футер влево. Результат — бессонная ночь и прочие авралы, но так и не найденое решение. Не могли бы вы взглянуть на develop.fantregata.com (в ближайшие пару дней сайт будет ещё там. Временно.) и сказать, где я дурак?
25.Vovchik | 03 Oct, 2007
Спасибо за статью. Без нее, наверное, мне бы пришлось плюнуть на все и сверстать табличками один элемент, внутри куча все должно быть: и overflow: hidden, и position: relative, и position: absolute и float'ы. Для файрфокса заработало сразу, без извратов. А вот для IE пришлось перечитать статью, добавить еще пару div-ов и поиграться с padding-ами. Убейте кто-то все IE в мире :)
26.Алексей Гусев | 30 Jan, 2008
2 maximum: я не знаю слова "основной". Зато есть слово "стандарт". Так вот, ваш основной браузер срал на стандарт. И срет в каждой новой версии. Это бесит многих людей, даже тех, которые умеют "дизайнить" (кстати, что это такое?). Например, почитайте Roadmap к MooTools. Его не дураки делали, поверьте. Раз его w3c.org на своей страничке использует. А вот w3c это как раз о стандартах. Там их не "дизайнят", там их разрабатывают. Хорошие стандартные стандарты. На которые срут плохие основные браузеры.
27.Joni Jones | 13 Feb, 2008
В ослике тоже свои прелести есть взять тот же behavior. Не спорю, срать на стандарты это не есть гут. Что радует: если проследить за последними тенденциями всё-таки радует, что верстаешь страничку, а она в IE FF и O (последних версиях перечисленных) одинаково выглядит - это ли не чудо!!!
28.Ната | 27 Feb, 2008
спасибо, спасибо, спасибо, спасибо, за _height:0;, вы бог
29.akella | 27 Feb, 2008
ах, какой приятный комментарий! телефончик оставите? :P
30.Игорь | 04 Jun, 2009
Это далеко не все хаки. Я вообще собирал все хаки под ИЕ. Вот статья о хаках под интернет эксплорер
31.Web-center &raquo; Архив блога &raquo; Анти-IE | 14 Jun, 2008
[...] http://cssing.org.ua/2005/11/11/ie-magic… [...]
32.cssing :: Архив :: Internet Explorer и z-index | 07 Dec, 2008
[...] нет, может добавили для absolute блоков внутри, или для хаков. ? ак-то [...]
33.Neurons to bytes &raquo; Blog Archive &raquo; Хинты по вёрстке. Для тех, кто не знал. | 24 Feb, 2009
[...] что-то глючит в ИЕ - следует прочитать: http://cssing.org.ua/2005/11/11/ie-magic/ и глянуть http://www.positioniseverything.net/ie-primer.html а так же [...]
34.Семантическая верстка — советы и решения. Часть вторая. Хаки-шмаки, даём люлей IE | Искусство создания и продвижения сайтов | 27 Jul, 2010
[...] Магия для IE [...]