Магия для IE

11 November, 2005

XHTML/CSS

Ни для кого не секрет что у интернет эксплорера полным полно разнообразных багов в поддержке 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-свойствами.

Ссылки

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

XHTML/CSS

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

tobto_ | 1. 12 November, 2005

хакм – это каки. я сегодня у америкозов встретил ссылки на статьи, типа – “IE5 – goodbye!”, т.е. коллеги переходят на поддержку новой серии броузеров: IE7, Op9, Ff1.5,…
Это означает (ура!) полную поддержку CSS2, HttpRequest технологий, которые с Большим удовольствием работают в новых рамках этих изделий. Итого, вместо того, чтобы писать “Support FF”, нужно писать “Support Web2.0”, а тем, кто не понимает происходящего (т.е. упорно снимает уе с бедных и не очень граждан, производя кальку с помощью дримвивера и считая это верхом дизигна), следует читать морали по поводу того, что English – великая вещь. Идем читать исходники – прямо на блоги разработчиков Ff, Op, IE. И не прикидывайтесь, что впереди сессия. Наступает великая технология рсс – нету преподов, газет, тактильности изданий. Есть инициатива, непосредственность контента, отсутствие надзора. Как говорил классик – “Читайте первоисточники”.

Addio.

Кай | 2. 12 November, 2005

2 tobto:
То, что кто-то перешёл на ИЕ7, совершенно не значит, что ИЕ6 сразу же исчёзнет у всех остальных. Теперь эти вумные дядьки будут и дальше строчить свои новые статьи, а большинство людей только начнёт приглядываться к ИЕ7 и перейдет на него очень даже не скоро. И поэтому различные хаки умными людей будут ещё использоваться.

Vladson | 3. 12 November, 2005

Глобальный переход на IE6 случился только когда WinXP потерял “зелёную” болезнь а Win98 безнадёжно устарел, думаю переход IE7 будет примерно таким-же (я прогнозировал бы это примерно в 2008-м году)

ganges | 4. 12 November, 2005

Я использую html > body #something в отдельном файле
Это и не хак в общем-то
В других пока, за исключением height:1%; небыло надобности

Совет – все хаки в отдельный файл – рулит.

uggallery | 5. 12 November, 2005

В большинстве случаев выбор прост: либо хаки, либо – дополнительная разметка, лишние дивы и спаны. Хаки – прелесть. Правильно настроить систему хаков – большое удовольствие. Когда браузеры начнут одинаково поддерживать стандарты, верстка превратится в рутину. И все-таки, каждый раз когда новые технологии позволяют отказаться от очередного хака, я вздыхаю с облегчением. Такие вот противоречия.

Спасибо за интересный материал, надо будет изучить его получше.

akella | 6. 12 November, 2005

А теперь еще ж добавилась головная боль с хаками под ИЕ7:
http://www.positioniseverything.net/articles/ie7-dehacker.html

Вообще мое мнение – надо их как можно сильнее обезопасивать – типа conditional comments – что бы они оставались рабочими и в будущем. А то сколько хаков полетело после выхода ИЕ7… :(

А до вступления в ИЕ 7 еще прийдется ждать :(. Хотя на ИЕ5-5.5 и я уже стал “слегка” не обращать внимания. (не на суперпосещаемых ресурсах конечно)

Kildor | 7. 12 November, 2005

В примерах в разделе
„Как применять”
Условные комментарии — по моему дефисы потерялись… Надо же вроде как?

Kildor | 8. 12 November, 2005

грр…
<!–[if lt ie 7]><![endif]–>

Vladson | 9. 12 November, 2005

Блин пора уже делать заглушки

Я как-то в 98-м году зашёл на сайт Audi через IE3 а мне вылезла страничка что сайт просматривается только с IE4 и выше, и никаких ссылок кроме windows-update.
Это и побудило меня переходить с Win95 на Win98 (98SE ещё не было) вот думаю если посещаемые сайты (например mail.ru или yandex) начнут делать так-же только относительно всех IE то в полку Оперных-Лисичек прибудет…

Я почему всё это говорю, зашёл я тут через IE5.0 на одну свою страничку, так её так перекосило что я чуть не долбанулся :) оказалось что там text-align взялся чёрт знает от куда и вставился чёрт знает куда, пришлось пол CSS переписывать чтоб везде работало…

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

ganges | 10. 13 November, 2005

2Vladson
Nope

2Akella
Почитал вчерашние ссылки и понял, что хак с > селектором надо выключать :) Конд Коммент работает

Эргэл | 11. 14 November, 2005

Есть один очень простой способ борьбы с несовместимостью броузеров: XHTML-валидатор + CSS-валидатор. Валидная страница отображается одинаково правильно во всех броузерах, даже в Опере. Исключение только одно: IE known bugs. Вот тут-то и нужны хаки.
В закладки!

Блогово Дракона » Фокусы CSS | 12. 14 November, 2005

[…] и Как убрать нестыковки повторяющихся фонов Rollover на CSS без жырных жабаскрипов UPD: Магия для IE – полезные хаки. см. также:Определитель шрифта

[…]

Vladson | 13. 14 November, 2005

Ув.Эргэл, ваш способ улетает в трубу если сделать сайт хоть немного сложнее красной страницы с зелёной надписью “Драсте я Вася Пупкин” причём в IE отоброжается вовсе как повезёт, а в остальных зависит от многих факторов (не забывайте, не у всех посетителей Опера под Windows, есть люди сидящие на маках и никсах)

Александр | 14. 14 November, 2005

Ув. Владсон, позвольте несогласиться. С вашим подходом мы снова вернемся к надписям “Сайт оптимизирован для просмотра в FF1.5, а IE идет лесом”. Мне приходися делать сайты много, очень много сложнее, чем зеленым по красному. И подход Эргэла меня спасает, причем спасает он и страницу от разваливания в IE 4.01. Да, вот так вот, представьте себе. Но ваш метод отбрасывания неугодных браузеров тоже имеет преимущества: не надо хаки изучать, можно даже, наверное, и стандарты не читать и пользоваться исключительно жалким плагинчиком FF (WebDeveloper).

Akella, спасибо за интересную статейку

akella | 15. 14 November, 2005

@Kildor: вордресс преобразует, гад…

@Vladson: ну сказать 70% процентам людей – мол меняйте броузер – тоже совсем некрасиво. Они это воспримут точно как мы надпись “работает в ИЕ 6 и выше”. И мы будем ничем не лучше. Александр абсолютно прав.

@Эргэл: Да ты прав – но иногда еще нет нет да и встретится какая нибудь разность под линукс или МАК. Хотя от этого как правило помогают не хаки – а просто избежание некоторых “стремных” свойств.

Vladson | 16. 14 November, 2005

>>> ну сказать 70% процентам людей – мол меняйте броузер
Мне так на AUDI сказали и я воспринял это как должное и обновился… (хотя я не просто браузер обновил а вовсе ось, так что данный случай ещё более менее “добрый”)

Эpгэл | 17. 14 November, 2005

Забыл отметить важную деталь: я свой способ проверял только на CSS-дизайне, а не табличном не проверял. Точнее пытался, но давно очень, и не смог тогда свои таблицы завалидировать.
Vladson, не надо ставить этот способ с головы на ноги! В IE дизайн надо “дорабатывать напильником”, потому что known bugs. Валидация позволяет всего лишь избежать оптимизации сайта ещё для пары десятков броузеров, да и под IE означает половину работы.

DenD | 18. 28 November, 2005

_height: 0;
ведет как-то странно себя.
_height: 1%;
не решает проблем в двухколоночных лэйаутах с двумя флоатами, так что <div class=”clear”>> пока рулит

akella | 19. 28 November, 2005

ведет как-то странно себя.

Как это странно? Сделай один блок без указанной ширины. Помести в него ФЛОАТ блок. Тогда внешний не растянется до флоата. Добавляешь _height: 0; все рабоатет. (в ие)

Тут ведь главное хоть один триггер для hasLayout употребить – высота ширина – релэйтив…
Просто иногда ширину нельзя точно задавать…

А насчет <div class=”clear”> – так я про них уже забыл – употребляй overflow:hidden или overflow:visible – для обрамляющего флоаты блока. Лишнего кода не будет…
Смотри заметку – Как я делаю две колонки – там в посте и комментах есть. И в примерах тоже кстати.

maximum | 20. 7 December, 2005

Ребята, что то вы чушь полную порите, ИЕ как раз основной браузер, а не Мозилла.
Нечего винить ИЕ в кривости, её у него нет.
Просто если не умеете дизайнить..
Вот и всё.
Нефик шаблоны под мозиллу переделывать.

akella | 21. 7 December, 2005

К сожалению кривость есть :). Это не предмет спора, а лишь факт.
Единственное его преимущество – массовость. На этом собссно все.

Tyler | 22. 27 December, 2005

Переходите на Firefox или Opera :)

ddvhouse | 23. 16 February, 2007

Мне в некоторых случаях помогает прописать исключение для IE7:
*+html #div {height:auto}
Поидее auto должно автоматом стоять, но как оказалось у IE7 не всегда.
IE7, на мой взгляд, сыроват вышел: косяки типа height:1px поправили, а стандарт для этой альтернаттвы display:table не добавили. :(
Лучше б тогда вообще всё как в IE6 оставили…

Vovchik | 24. 3 October, 2007

Спасибо за статью.
Без нее, наверное, мне бы пришлось плюнуть на все и сверстать табличками один элемент, внутри куча все должно быть: и overflow: hidden, и position: relative, и position: absolute и float’ы.
Для файрфокса заработало сразу, без извратов. А вот для IE пришлось перечитать статью, добавить еще пару div-ов и поиграться с padding-ами.

Убейте кто-то все IE в мире :)

Алексей Гусев | 25. 30 January, 2008

2 maximum: я не знаю слова “основной”. Зато есть слово “стандарт”.

Так вот, ваш основной браузер срал на стандарт. И срет в каждой новой версии. Это бесит многих людей, даже тех, которые умеют “дизайнить” (кстати, что это такое?).

Например, почитайте Roadmap к MooTools. Его не дураки делали, поверьте. Раз его w3c.org на своей страничке использует. А вот w3c это как раз о стандартах. Там их не “дизайнят”, там их разрабатывают. Хорошие стандартные стандарты.

На которые срут плохие основные браузеры.

Joni Jones | 26. 13 February, 2008

В ослике тоже свои прелести есть взять тот же behavior. Не спорю, срать на стандарты это не есть гут.
Что радует: если проследить за последними тенденциями всё-таки радует, что верстаешь страничку, а она в IE FF и O (последних версиях перечисленных) одинаково выглядит – это ли не чудо!!!

Ната | 27. 27 February, 2008

спасибо, спасибо, спасибо, спасибо, за _height:0;, вы бог

akella | 28. 27 February, 2008

ах, какой приятный комментарий! телефончик оставите? :P

Web-center » Архив блога » Анти-IE | 29. 14 June, 2008

[…] http://cssing.org.ua/2005/11/11/ie-magic… […]

cssing :: Архив :: Internet Explorer и z-index | 30. 7 December, 2008

[…] нет, может добавили для absolute блоков внутри, или для хаков. ? ак-то […]

Neurons to bytes » Blog Archive » Хинты по вёрстке. Для тех, кто не знал. | 31. 24 February, 2009

[…] что-то глючит в ИЕ – следует прочитать: http://cssing.org.ua/2005/11/11/ie-magic/ и глянуть http://www.positioniseverything.net/ie-primer.html а так же […]

Игорь | 32. 4 June, 2009

Это далеко не все хаки. Я вообще собирал все хаки под ИЕ. Вот статья о хаках под интернет эксплорер

Wave | 33. 10 December, 2009

К сожалению, не всегда работает.
Имеется: картинка с релятивной позицией, сдвинутая вверх на сколько-то. Всё, что вверх, отсекается. Всевозможные
overflow: visible; zoom: 1; float: left; position: relative; height:1%; _height:0;
родительских дивов вплоть до самого верхнего, который сдвинут на 20 пикселей влево, и даже вплоть до body — не могут вернуть пропавшую часть картинки. IE6-7.
Футер тоже пропал, но его я смог вернуть условным комментарием, где всё, что не осёл, сдвигает футер влево.
Результат — бессонная ночь и прочие авралы, но так и не найденое решение.
Не могли бы вы взглянуть на develop.fantregata.com (в ближайшие пару дней сайт будет ещё там. Временно.) и сказать, где я дурак?

Семантическая верстка — советы и решения. Часть вторая. Хаки-шмаки, даём люлей IE | Искусство создания и продвижения сайтов | 34. 27 July, 2010

[…] Магия для IE […]

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