Магия для 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>)- <!‒‒[if lt IE 7]><style>
- /* стили для IE 6 + IE5.5 + IE5.0 */
- .gainlayout { height: 0; }
- </style><![endif]‒‒>
- #for-iewin-only{
- _height:0;
- }
в конце
Просто полезно иметь под рукой пару свойств, которые не раз меня выручали. Иногда просто в отчаянии и надеясь на удачу можно поприменять их к чему-попало.Начинающим правда это не рекомендуется - так как часто то, что им кажется глюком на самом деле есть правильное отображение. Лучший выход сравнивать отображение в ИЕ, Опере и Файрфоксе. Если Опера и Мозилла все показывают нормально, а ИЕ глючит - скорее всего можно смело применять хаки.
Желательно все же знать самые распространенные глюки которыми грешит этот броузер.
Конечно хаки это зло - но с помощью некоторых методов мы можем их спрятать так что они не смогут принести вреда в будущем и никак не пересекутся с другими "нормальными" CSS-свойствами.
Ссылки
- How To Attack An Internet Explorer (Win) Display Bug - потомок старой статьи "Magic Bullets", которой и навеян этот пост
- On having layout очень хорошее описание свойства hasLayout у ИЕ
- Глюки ИЕ собрание некоторых распространенных проблем с интернетом эксплорером
А вы что думаете про хаки?
_height: 0;ведет как-то странно себя._height: 1%;не решает проблем в двухколоночных лэйаутах с двумя флоатами, так что <div class="clear">> пока рулит_height: 0;все рабоатет. (в ие) Тут ведь главное хоть один триггер для hasLayout употребить - высота ширина - релэйтив... Просто иногда ширину нельзя точно задавать... А насчет <div class=”clear”> - так я про них уже забыл - употребляй overflow:hidden или overflow:visible - для обрамляющего флоаты блока. Лишнего кода не будет... Смотри заметку - Как я делаю две колонки - там в посте и комментах есть. И в примерах тоже кстати.