Главная Обратная связь

Дисциплины:






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



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



0 комментариев

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), в остальных браузерах наблюдаются более или менее сильные различия со шрифтами, размером и цветом фона.

Рис. 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 эта ошибка исправлена

 





sdamzavas.net - 2017 год. Все права принадлежат их авторам! В случае нарушение авторского права, обращайтесь по форме обратной связи...