Режим совместимости
Этот режим предназначен для отображения веб-страницы подобно старым браузерам. В режиме совместимости игнорируются стандарты 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). В стандартном режиме такие цвета игнорируются.
Пикселы по умолчанию
Если в стилях в качестве единицы размера указано число без единицы измерения, считается, что значение задано в пикселах. В стандартном режиме такие значения игнорируются.
Пробел после значения в CSS
В стилях допустимо ставить пробел перед единицей измерения (10 px, а не 10px). В стандартном режиме такие значения игнорируются.
Псевдокласс :hover
Псевдокласс :hover может добавляться к ссылкам, изображениям и элементам форм, только если селектор включает имя тега, идентификатора или атрибут. Запись .test:hover не работает в браузерах IE и Firefox, в то время как a.test:hover понимается всеми браузерами в режиме
совместимости.
margin: auto не работает в IE
Для блоков с заданной шириной margin со значением auto не выравнивает блок по центру в браузере
IE.
Ширина блока
Ширина блока равна значению width. Поля (padding) и границы (border) не влияют на ширину и находятся внутри блока.
Высота блока
Заданная высота блока игнорируется, когда высота контента превышает указанную высоту блока, которая при этом увеличивается согласно высоте контента.
Ширина строчных элементов
IE позволяет установить ширину и высоту строчных элементов вроде <span>. В стандартном режиме и в других браузерах значения размеров для строчных элементов игнорируются.
Здесь перечислены не все проблемы, возникающие в режиме совместимости, но этого вполне достаточно, чтобы сделать вывод, о том, что этот режим использовать не надо. В примере 2.7 допущены некоторые ошибки HTML и CSS характерные для режима совместимости.
Пример 2.7. Страница в режиме совместимости XHTML 1.0 CSS 2.1 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6
<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 результат получился желаемым (рис. 2.5), в остальных браузерах наблюдаются более или менее сильные различия со шрифтами, размером и цветом фона.
Рис. 2.5. Результат в браузере Opera 11
В браузере IE6 имеется ошибка, связанная с доктайпом, он обязательно должен находиться в первой строке кода. Если вы добавляете в первую строку кода не доктайп, а другой элемент или текст, браузер IE6 переходит в режим совместимости (пример 2.8).
Пример 2.8. Ошибка в IE6 XHTML 1.0 IE 6 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6
<?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 эта ошибка исправлена.
MIME-тип документа
MIME (Multipurpose Internet Mail Extensions, многоцелевые расширения интернет-почты) — стандарт Интернет, является частью протокола HTTP. Задача MIME это идентификация типа содержимого документа по его заголовку. К примеру, текстовый файл имеет тип text/plain, а HTML-файл — text/html. Отправка заголовка обычно происходит на основе расширения файла веб-сервером.
Документы XHTML по умолчанию отправляются как text/html, что в действительности говорит о том, что мы имеем дело с HTML, а не XHTML-файлом. Чтобы задействовать возможности XHTML требуется отдавать файл с типом application/xhtml+xml. Если у вас установлен веб-сервер Apache, то вы можете сделать это через директиву AddType, добавив следующую строку в файл .htaccess, расположенный в корне сайта.
AddType application/xhtml+xml .xhtml
В данном случае мы говорим, что все файлы с расширением .xhtml отдавать как application/xhtml+xml. Если документы формируются через PHP, то можно отдавать заголовок следующим образом:
header ("Content-type: application/xhtml+xml");
Учтите, что эта строка должна идти до вывода любого текста на странице.
Браузер Internet Explorer до версии 8.0 включительно не поддерживает тип application/xhtml+xml и не сможет отобразить страницу, которая отдаётся с этим типом. Остальные браузеры, в том числе IE9, понимают этот тип как переход в стандартный режим.
Тип application/xhtml+xml необходим в случае, когда в документе применяется MathML (Mathematical Markup Language, язык математической разметки), предназначенный для добавления формул или SVG (Scalable Vector Graphics, масштабируемая векторная графика), язык разметки для создания на странице векторных рисунков. Если вы ничего не знаете об этих технологиях и пока не собираетесь их использовать, лучше отдавать документ как text/html. Это позволит охватить наибольшее количество браузеров и поисковых систем.
По сути, тип text/html для файлов с расширением .html или .htm настроен автоматически, поэтому не требуется предпринимать каких-либо действий для этого типа.