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

21.06.2011

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

Этот режим предназначен для отображения веб-страницы подобно старым браузерам. В режиме совместимости игнорируются стандарты 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> игнорируется.

Размер шрифта в таблице

Если размер текста в ячейке таблицы устанавливается в процентах, то он берётся не относительно размера для <body>, а от значения по умолчанию, которое обычно равно 16px. Иными словами, значение font-size для селектора BODY не принимается во внимание.

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

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

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

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

Цвета

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

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

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

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

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

Псевдокласс :hover

Псевдокласс :hover может добавляться к ссылкам, изображениям и элементам форм, только если селектор включает имя тега, идентификатора или атрибут. Запись .test:hover не работает в браузерах IE и Firefox, в то время как a.test:hover понимается всеми браузерами в режиме совместимости.

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

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

Ширина блока

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

Высота блока

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

Ширина строчных элементов

IE позволяет установить ширину и высоту строчных элементов вроде <span>. В стандартном режиме и в других браузерах значения размеров для строчных элементов игнорируются.

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

Пример 1.7. Страница в режиме совместимости

XHTML 1.0CSS 2.1IECrOpSaFx

<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <style>
   body { background: F2E0BE; }
   table { 
    width: 100%;
    height: 100%; 
   }
   table td { text-align: center; }
   #2mc {
    font-size: xx-large;
   }
   sup { font-size: 24; }
  </style>
 </head>
 <body>
  <table>
   <tr><td>
    <div id="2mc">E = mc<sup>2</sup></div>
   </td></tr>
  </table>
 </body>
</html>

Только в браузере Opera результат получился желаемым (рис. 1.5), в остальных браузерах наблюдаются более или менее сильные различия со шрифтами, размером и цветом фона.

Результат в браузере Opera 11

Рис. 1.5. Результат в браузере Opera 11

В браузере IE6 имеется ошибка, связанная с доктайпом, он обязательно должен находиться в первой строке кода. Если вы добавляете в первую строку кода не доктайп, а другой элемент или текст, браузер IE6 переходит в режим совместимости (пример 1.8).

Пример 1.8. Ошибка в IE6

XHTML 1.0IE 6IE 7+CrOpSaFx

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>Стандартный режим</title>
 </head>
 <body>
  <p>...</p>
 </body>
</html>

В данном примере кодировка документа задаётся с помощью элемента <?xml ?> в первой строке кода, что приводит к переходу в режим совместимости в IE6, несмотря на строгий доктайп. В браузере IE7 эта ошибка исправлена.

доктайп