Уличная магия IE

Продолжая тему того, как нужно прятаться, чтобы не бояться, сегодня я хотел бы предложить вам руководство по использованию магического элемента X-UA-Compatible в контексте общего понимания переключения режимов рендеринга в Internet Explorer.

Итак, сводный список «Режимы рендеринга Internet Explorer».

Принцип построения данного списка звучит просто: что нужно сделать и каких ошибок не допустить для того, чтобы IE6–8 вёл себя согласно поставленным задачам. То есть работал или в режиме совместимости со стандартами (standard compliance mode), или в режиме уловок (quirks mode), или — в случае с IE8 — в режиме соответствия стандартам (super standard mode).

Каждый из примеров списка состоит только из тех элементов, которые необходимы для соответствующего режима. К примеру, для переключения в режим совместимости со стандартами, IE6 нужен только правильный <DOCTYPE>, перед которым возможно наличие только пробелов и переводов строк:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

В то время как для IE8 достаточно произнести подобное заклинание:

<meta http-equiv="X-UA-Compatible" content="IE=7"/>

В данном списке не учтены особенности перехода IE8 из режима соответствия стандартам в режим совместимости со стандартами на интранет-страницах, что является скорее бизнес-ходом, не дающим разработчикам особого выбора. Подробнее об этом можно прочитать у Хокона Ли (Hakon Lie) в заметке «Microsoft breaks IE8 interoperability promise».

Такие вот чудеса.

Комментарии

18

IE6 имеет режим совместимости со стандартами???
Только, видимо, по мнению explorer'а, в стандарты забыли дописать «Режим совместимости с MSIE»

есть у меня мечта, нарисовать в ие6 див высотой в 1 пиксель.. но как??

font: 0/0 serif; height: 1px;

font: 0/0 serif; height: 1px;

Вообще overflow:hidden идеологически круче — мы заставляем IE соблюдать заданную высоту блока так, как делают это нормальные браузеры ;)

есть у меня мечта, нарисовать в ие6 див высотой в 1 пиксель.. но как??

так например

.hr1 {
    height:1px;
    line-height:0px;
    font-size:0px;
    border-bottom:1px dashed #4373DC;
}

Сорри за оффтоп, а как бы это поставить ie8, чтоб остался стоять 7-ой? Комплект из 5,6 у меня есть...

Строго говоря, в IE8 есть кнопочка «Compatibility View», которая делает из него IE7.
Но это не 100% соответствие IE7, хотя для большинства случаев сойдёт.

Наболевший вопрос:
Собственно не раз было такое, что в режиме совместимости ИЕ8 показывает не так, как ИЕ7, из-за этого отказался от совместимости и теперь у меня 3 файла стилей для ИЕ.
Собственно вопросы:
1. какие плюсы/минусы режима совместимости
2. насколько плохо 3 файла стилей?
3. как всё-таки лучше?

Благодарю за ответы.
П.С. Куплю/приму инвайт на Хабр.

1. Плюсы в том, что вы можете писать почти такой же код, как для остальных браузеров. Это удобно. Хорошо ещё то, что для IE8 в этом режиме можно использовать фичи, недоступные для IE7
2. Если только три файла хаков для IE — это наверное перебор. Достаточно одного файла, в котором фильтровать селекторы: * HTML для IE6, *+HTML для IE7.
3. См. пункт 2

Как-то я про разделение между ИЕ забыл, спасибо. То есть один файл в СС и без режима совместимости?

А насчёт минусов: они вообще имеются?

Да, CC if IE и всё в один файл. Минусы только в том, что придётся иметь в виду ещё одну версию IE, но это полезно с точки зрения будущего создаваемой вёрстки.

есть у меня мечта, нарисовать в ие6 див высотой в 1 пиксель.. но как??

.ie6-height-1px {
height: 1px;
font-size: 1px;
}