Магия для IE
11 November, 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>)
- <!‒‒[if lt IE 7]><style>
- /* стили для IE 6 + IE5.5 + IE5.0 */
- .gainlayout { height: 0; }
- </style><![endif]‒‒>
это называется conditional comments
Ну и все тот же хак:
- #for-iewin-only{
- _height:0;
- }
Свойство увидят только ИЕ под винду.
в конце
Просто полезно иметь под рукой пару свойств, которые не раз меня выручали. Иногда просто в отчаянии и надеясь на удачу можно поприменять их к чему-попало.
Начинающим правда это не рекомендуется – так как часто то, что им кажется глюком на самом деле есть правильное отображение. Лучший выход сравнивать отображение в ИЕ, Опере и Файрфоксе. Если Опера и Мозилла все показывают нормально, а ИЕ глючит – скорее всего можно смело применять хаки.
Желательно все же знать самые распространенные глюки которыми грешит этот броузер.
Конечно хаки это зло – но с помощью некоторых методов мы можем их спрятать так что они не смогут принести вреда в будущем и никак не пересекутся с другими “нормальными” CSS-свойствами.
Ссылки
- How To Attack An Internet Explorer (Win) Display Bug – потомок старой статьи “Magic Bullets”, которой и навеян этот пост
- On having layout очень хорошее описание свойства hasLayout у ИЕ
- Глюки ИЕ собрание некоторых распространенных проблем с интернетом эксплорером
А вы что думаете про хаки?
хакм – это каки. я сегодня у америкозов встретил ссылки на статьи, типа – “IE5 – goodbye!”, т.е. коллеги переходят на поддержку новой серии броузеров: IE7, Op9, Ff1.5,…
Это означает (ура!) полную поддержку CSS2, HttpRequest технологий, которые с Большим удовольствием работают в новых рамках этих изделий. Итого, вместо того, чтобы писать “Support FF”, нужно писать “Support Web2.0”, а тем, кто не понимает происходящего (т.е. упорно снимает уе с бедных и не очень граждан, производя кальку с помощью дримвивера и считая это верхом дизигна), следует читать морали по поводу того, что English – великая вещь. Идем читать исходники – прямо на блоги разработчиков Ff, Op, IE. И не прикидывайтесь, что впереди сессия. Наступает великая технология рсс – нету преподов, газет, тактильности изданий. Есть инициатива, непосредственность контента, отсутствие надзора. Как говорил классик – “Читайте первоисточники”.
Addio.
2 tobto:
То, что кто-то перешёл на ИЕ7, совершенно не значит, что ИЕ6 сразу же исчёзнет у всех остальных. Теперь эти вумные дядьки будут и дальше строчить свои новые статьи, а большинство людей только начнёт приглядываться к ИЕ7 и перейдет на него очень даже не скоро. И поэтому различные хаки умными людей будут ещё использоваться.
Глобальный переход на IE6 случился только когда WinXP потерял “зелёную” болезнь а Win98 безнадёжно устарел, думаю переход IE7 будет примерно таким-же (я прогнозировал бы это примерно в 2008-м году)
Я использую html > body #something в отдельном файле
Это и не хак в общем-то
В других пока, за исключением height:1%; небыло надобности
Совет – все хаки в отдельный файл – рулит.
В большинстве случаев выбор прост: либо хаки, либо – дополнительная разметка, лишние дивы и спаны. Хаки – прелесть. Правильно настроить систему хаков – большое удовольствие. Когда браузеры начнут одинаково поддерживать стандарты, верстка превратится в рутину. И все-таки, каждый раз когда новые технологии позволяют отказаться от очередного хака, я вздыхаю с облегчением. Такие вот противоречия.
Спасибо за интересный материал, надо будет изучить его получше.
А теперь еще ж добавилась головная боль с хаками под ИЕ7:
http://www.positioniseverything.net/articles/ie7-dehacker.html
Вообще мое мнение – надо их как можно сильнее обезопасивать – типа conditional comments – что бы они оставались рабочими и в будущем. А то сколько хаков полетело после выхода ИЕ7… :(
А до вступления в ИЕ 7 еще прийдется ждать :(. Хотя на ИЕ5-5.5 и я уже стал “слегка” не обращать внимания. (не на суперпосещаемых ресурсах конечно)
В примерах в разделе
„Как применять”
Условные комментарии — по моему дефисы потерялись… Надо же вроде как?
грр…
<!–[if lt ie 7]><![endif]–>
Блин пора уже делать заглушки
Я как-то в 98-м году зашёл на сайт Audi через IE3 а мне вылезла страничка что сайт просматривается только с IE4 и выше, и никаких ссылок кроме windows-update.
Это и побудило меня переходить с Win95 на Win98 (98SE ещё не было) вот думаю если посещаемые сайты (например mail.ru или yandex) начнут делать так-же только относительно всех IE то в полку Оперных-Лисичек прибудет…
Я почему всё это говорю, зашёл я тут через IE5.0 на одну свою страничку, так её так перекосило что я чуть не долбанулся :) оказалось что там text-align взялся чёрт знает от куда и вставился чёрт знает куда, пришлось пол CSS переписывать чтоб везде работало…
Так что однозначно нафиг IE если сайт людям интересен то пусть и смотрят его нормальными браузерами, а если им лень Ёперу или Лисичку ставить, то либо пошли такие посетители куда подальше, либо пусть хоть ради того чтоб сайт почитать встанут на путь истенный.
2Vladson
Nope
2Akella
Почитал вчерашние ссылки и понял, что хак с > селектором надо выключать :) Конд Коммент работает
Есть один очень простой способ борьбы с несовместимостью броузеров: XHTML-валидатор + CSS-валидатор. Валидная страница отображается одинаково правильно во всех броузерах, даже в Опере. Исключение только одно: IE known bugs. Вот тут-то и нужны хаки.
В закладки!
[…] и Как убрать нестыковки повторяющихся фонов Rollover на CSS без жырных жабаскрипов UPD: Магия для IE – полезные хаки. см. также:Определитель шрифта
–
[…]
Ув.Эргэл, ваш способ улетает в трубу если сделать сайт хоть немного сложнее красной страницы с зелёной надписью “Драсте я Вася Пупкин” причём в IE отоброжается вовсе как повезёт, а в остальных зависит от многих факторов (не забывайте, не у всех посетителей Опера под Windows, есть люди сидящие на маках и никсах)
Ув. Владсон, позвольте несогласиться. С вашим подходом мы снова вернемся к надписям “Сайт оптимизирован для просмотра в FF1.5, а IE идет лесом”. Мне приходися делать сайты много, очень много сложнее, чем зеленым по красному. И подход Эргэла меня спасает, причем спасает он и страницу от разваливания в IE 4.01. Да, вот так вот, представьте себе. Но ваш метод отбрасывания неугодных браузеров тоже имеет преимущества: не надо хаки изучать, можно даже, наверное, и стандарты не читать и пользоваться исключительно жалким плагинчиком FF (WebDeveloper).
Akella, спасибо за интересную статейку
@Kildor: вордресс преобразует, гад…
@Vladson: ну сказать 70% процентам людей – мол меняйте броузер – тоже совсем некрасиво. Они это воспримут точно как мы надпись “работает в ИЕ 6 и выше”. И мы будем ничем не лучше. Александр абсолютно прав.
@Эргэл: Да ты прав – но иногда еще нет нет да и встретится какая нибудь разность под линукс или МАК. Хотя от этого как правило помогают не хаки – а просто избежание некоторых “стремных” свойств.
>>> ну сказать 70% процентам людей – мол меняйте броузер
Мне так на AUDI сказали и я воспринял это как должное и обновился… (хотя я не просто браузер обновил а вовсе ось, так что данный случай ещё более менее “добрый”)
Забыл отметить важную деталь: я свой способ проверял только на CSS-дизайне, а не табличном не проверял. Точнее пытался, но давно очень, и не смог тогда свои таблицы завалидировать.
Vladson, не надо ставить этот способ с головы на ноги! В IE дизайн надо “дорабатывать напильником”, потому что known bugs. Валидация позволяет всего лишь избежать оптимизации сайта ещё для пары десятков броузеров, да и под IE означает половину работы.
_height: 0;ведет как-то странно себя.
_height: 1%;не решает проблем в двухколоночных лэйаутах с двумя флоатами, так что <div class=”clear”>> пока рулит
Как это странно? Сделай один блок без указанной ширины. Помести в него ФЛОАТ блок. Тогда внешний не растянется до флоата. Добавляешь
_height: 0;все рабоатет. (в ие)Тут ведь главное хоть один триггер для hasLayout употребить – высота ширина – релэйтив…
Просто иногда ширину нельзя точно задавать…
А насчет <div class=”clear”> – так я про них уже забыл – употребляй overflow:hidden или overflow:visible – для обрамляющего флоаты блока. Лишнего кода не будет…
Смотри заметку – Как я делаю две колонки – там в посте и комментах есть. И в примерах тоже кстати.
Ребята, что то вы чушь полную порите, ИЕ как раз основной браузер, а не Мозилла.
Нечего винить ИЕ в кривости, её у него нет.
Просто если не умеете дизайнить..
Вот и всё.
Нефик шаблоны под мозиллу переделывать.
К сожалению кривость есть :). Это не предмет спора, а лишь факт.
Единственное его преимущество – массовость. На этом собссно все.
Переходите на Firefox или Opera :)
Мне в некоторых случаях помогает прописать исключение для IE7:
*+html #div {height:auto}
Поидее auto должно автоматом стоять, но как оказалось у IE7 не всегда.
IE7, на мой взгляд, сыроват вышел: косяки типа height:1px поправили, а стандарт для этой альтернаттвы display:table не добавили. :(
Лучше б тогда вообще всё как в IE6 оставили…
Спасибо за статью.
Без нее, наверное, мне бы пришлось плюнуть на все и сверстать табличками один элемент, внутри куча все должно быть: и overflow: hidden, и position: relative, и position: absolute и float’ы.
Для файрфокса заработало сразу, без извратов. А вот для IE пришлось перечитать статью, добавить еще пару div-ов и поиграться с padding-ами.
Убейте кто-то все IE в мире :)
2 maximum: я не знаю слова “основной”. Зато есть слово “стандарт”.
Так вот, ваш основной браузер срал на стандарт. И срет в каждой новой версии. Это бесит многих людей, даже тех, которые умеют “дизайнить” (кстати, что это такое?).
Например, почитайте Roadmap к MooTools. Его не дураки делали, поверьте. Раз его w3c.org на своей страничке использует. А вот w3c это как раз о стандартах. Там их не “дизайнят”, там их разрабатывают. Хорошие стандартные стандарты.
На которые срут плохие основные браузеры.
В ослике тоже свои прелести есть взять тот же behavior. Не спорю, срать на стандарты это не есть гут.
Что радует: если проследить за последними тенденциями всё-таки радует, что верстаешь страничку, а она в IE FF и O (последних версиях перечисленных) одинаково выглядит – это ли не чудо!!!
спасибо, спасибо, спасибо, спасибо, за _height:0;, вы бог
ах, какой приятный комментарий! телефончик оставите? :P
[…] http://cssing.org.ua/2005/11/11/ie-magic… […]
[…] нет, может добавили для absolute блоков внутри, или для хаков. ? ак-то […]
[…] что-то глючит в ИЕ – следует прочитать: http://cssing.org.ua/2005/11/11/ie-magic/ и глянуть http://www.positioniseverything.net/ie-primer.html а так же […]
Это далеко не все хаки. Я вообще собирал все хаки под ИЕ. Вот статья о хаках под интернет эксплорер
К сожалению, не всегда работает.
Имеется: картинка с релятивной позицией, сдвинутая вверх на сколько-то. Всё, что вверх, отсекается. Всевозможные
overflow: visible; zoom: 1; float: left; position: relative; height:1%; _height:0;
родительских дивов вплоть до самого верхнего, который сдвинут на 20 пикселей влево, и даже вплоть до body — не могут вернуть пропавшую часть картинки. IE6-7.
Футер тоже пропал, но его я смог вернуть условным комментарием, где всё, что не осёл, сдвигает футер влево.
Результат — бессонная ночь и прочие авралы, но так и не найденое решение.
Не могли бы вы взглянуть на develop.fantregata.com (в ближайшие пару дней сайт будет ещё там. Временно.) и сказать, где я дурак?
[…] Магия для IE […]
Оставить комментарий