Режим совместимости

Влад Мержевич

Этот режим предназначен для отображения веб-страницы подобно старым браузерам. В режиме совместимости игнорируются стандарты HTML и CSS, и поведение браузеров становится непредсказуемым. Для переключения в режим совместимости существует множество доктайпов, вот лишь некоторые из них.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">

Также переход происходит, если доктайп вообще не указан или не может быть распознан.

Хотя браузеры по-разному интерпретируют код документа в режиме совместимости, некоторое поведение у них совпадает.

Высота таблицы и строки

Можно задать высоту таблицы или строки (тег <tr>) в процентах, пикселах или других единицах. В стандартном режиме атрибут height у тега <table> и <tr> игнорируется.

Имена идентификаторов и классов начинаются с цифры

В браузере IE и Opera имена классов и идентификаторов можно начинать с цифры. В остальных браузерах и в стандартном режиме такие имена недопустимы.

Нечувствительность к регистру

Имена идентификаторов и классов не зависят от регистра написания, имена mydiv и MyDiv считаются одинаковыми.

Цвета

Цвет в шестнадцатеричном значении можно задавать без символа решетки впереди (fc0 вместо #fc0). В стандартном режиме такие цвета игнорируются.

Пикселы по умолчанию

Если в стилях в качестве единицы размера указано число без единицы измерения, считается, что значение задано в пикселах. В стандартном режиме такие значения игнорируются.

Пробел после значения в CSS

В стилях допустимо ставить пробел перед единицей измерения (10 px, а не 10px). В стандартном режиме такие значения игнорируются.

margin: auto не работает в IE

Для блоков с заданной шириной margin со значением auto не выравнивает блок по центру в браузере IE.

Ширина блока

Ширина блока равна значению width. Поля (padding) и границы (border) не влияют на ширину и находятся внутри блока.

Высота блока

Заданная высота блока игнорируется, когда высота контента превышает указанную высоту блока, которая при этом увеличивается согласно высоте контента.

Здесь перечислены не все проблемы, возникающие в режиме совместимости, но этого вполне достаточно, чтобы сделать вывод, о том, что этот режим использовать не надо.

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.