Что происходит в браузерах при Quirks Mode

Quirks Mode — это режим работы таких браузеров, как Internet Explorer (IE), Firefox и Opera. В принципе, Quirks Mode (также называемый режимом совместимости) означает, что относительно современный браузер преднамеренно имитирует многие ошибки в старых браузерах, в частности — IE 4 и IE 5.





Цель Quirks Mode состоит в том, чтобы старые страницы показывать в современных браузерах так, как это и планировал автор (с учётом особенностей работы старых браузеров). Дополнительную информацию о Quirks Mode можно найти на сайте QuirksMode.org.

Нет никакой авторитетной спецификации того, что происходит при Quirks Mode. Этот режим, по сути, намеренное нарушение спецификаций HTML и CSS.

Если у Вас есть страница, которая, как Вам кажется, работает хорошо, но при этом отсутствует doctype-декларация (требуемая спецификациями HTML), Вы не можете просто вставить doctype. Причина в том, что декларация заставляет браузер работать в Standards Mode, что противоположно Quirks Mode. Это может означать, что угодно.

Я видел, когда добавляли doctype-декларацию, и всё содержимое страницы исчезало. Чаще всего, расположение меняется довольно неожиданно. Но для Вас это может быть не так, если Вы знаете о том, что может случиться при Quirks Mode.

Перед добавлением doctype-декларации, Вы должны проверить и HTML, и CSS-код на соответствие синтаксису, используя валидаторы. Во многих случаях этого может быть не достаточно, так как страница, возможно, создавалась, полагаясь на вещи, которые будут «работать» только при Quirks Mode. Таким образом, после добавления doctype-декларации, Вы должны проверить страницу, по крайней мере, на IE 7 и Firefox 2 при Standards Mode. Если страница отображается некорректно, то для определения проблемы может быть полезен следующий список.

Создавая новую страницу, Вы не обязаны знать о Quirks Mode и не должны всегда думать об этом. Просто пишите согласно спецификациям HTML и CSS; это включает использование doctype-декларации, которая переводит современные браузеры в Standards Mode.

Но если Вы решите использовать некоторые особенности, которые работают только при Quirks Mode, типа height=”100%” для элемента, Вы должны проверить список для других возможных значений.

Хотя и не все браузеры показывают эти особенности, в Quirks Mode браузеры ведут себя следующим образом :

• Неправильный расчёт блочной модели (отличается от CSS-спецификации, хотя интуитивно более понятен). Это означает, что размеры блока (ширина и высота) определяет не только содержимое элементов, но также и отступы, и границы.
• Размеры inline-элементов реагируют на свойства ширины и высоты (хотя по CSS-спецификации они должны игнорироваться)
• Процентное задание высоты элемента (к примеру , <table height=”100%”> в HTML или table { height: 100% }в CSS) применяется, используя имеющуюся высоту, даже если родительский элемент имеет высоту auto (по умолчанию). При Standards Mode, высота расчитывается от количества контента. Процентное задание высоты работает только при условии, если задана высота родительского элемента.
• Переполнение блока контентом вызывает изменение его размеров. Если объём контента не вписывается в размеры блока (заданные явно либо неявно), то свойство overflow:hidden означает, что контент будет доступен, и при этом размеры блока не будут изменяться. В случае Quirks Mode контент будет изменять размеры блока. Это можно увидеть, если блоку заданы бекграунд либо границы.
• Padding для изображений игнорируется, когда он задан через CSS для элемента img или для элемента input type=”image” .
• Горизонтальный отступ для обтекаемого изображения 3px вместо 0. Таким образом, если у img установлены атрибуты align=”left” или align=”right”, или CSS свойства float: left или float: right, то браузер ведёт себя, как будто у img установлен атрибут hspace = “3″ (или margin-left и margin-right имеют значение 3px).Это применимо к IE, в остальных браузерах Quirks Mode может вызывать отступ только с одной стороны изображения, и его величина может быть 2 px вместо 3.
  
• Вертикальное выравнивание изображения определяется относительно основания блока, а не относительно основания текста. Это происходит, когда изображение — это единственное содержимое блока. Это означает, что, например, при QuirksMode изображение в ячейке таблицы — по умолчанию у основания ячейки (что часто является предполагаемым поведением), в то время как при Standards Mode будет промежуток в несколько пикселей (если не определить для изображения vertical-align: bottom).
• Выравнивание блока по горизонтали с помощью CSS (margin: 0 auto) не работает.
• Свойства шрифта не наследуются от body или других элементов в table. Это происходит, в частности, с font-size, но может происходить с font-family, color, и line-height. Например, если Вы устанавливаете body { font-family: Arial }, возможно, что шрифт в ячейках таблицы останется установленным в браузере по умолчанию.
• Размер шрифта для ячейки таблицы, заданный в относительных величинах, рассчитывается относительно размера шрифта, установленного в браузере, а не относительно родительского элемента для table.
• Ключевые слова для установки размера шрифта рассчитываются неправильно, получается, что medium больше, чем базовый размер шрифта браузера, а small соответствует базовому размеру. Точно также все ключевые слова, xx-small, x-small, small, large, x-large, xx-large рассчитываются неправильно: каждый шаг, больше, чем должен быть.
• Неправильные объявления свойств часто интерпретируются на основе догадок, так например margin: 10 интерпретируется как margin: 10px и color: ffffff как color: #ffffff. Это нарушает обязательные правила обработки ошибок в CSS: правила с синтаксически неправильными значениями должны игнорироваться.
• Селекторы в CSS не зависят от регистра. Например, .foo соответствует элементу с классом class=”Foo” или class=”FOO”. Но в спецификации определена зависимость селекторов от регистра.
• Допускается неправильное написание селекторов, например таких как .123a или #42.
• Свойство position: fixed соответствует position: static в IE 7.
• Значение свойства white-space: pre игнорируется.
• Большинство CSS-свойств, которые не поддерживались в IE 6, в IE 7 поддерживаются только при Standards Mode.
• Парсинг Tag soup. Например, имея такой код <p>text<table>…</table>, в Firefox, при Quirks Mode, элемент p будет содержать элемент table. При Standards Mode открывающий тег table неявно закроет элемент p. IE всегда разбирает такой код неправильно.
• Переносы строк могут учитываться. Например, Вы имеете список ссылок. Обычно мы пишем с переносами строк (между <li> и </li>), для более удобного чтения кода:
  

  <ul>
  <li><a ...>...</a></li>
  <li><a ...>...</a></li>
  ...
  </ul>

  Однако, если Вы устанавливаете display: block и границы для элемента a, Вы можете столкнуться с вертикальными промежутками (пустыми линиями) между блоками. В IE7 это происходит при Quirks Mode, в более ранних версиях IE это происходит вне зависимости от режима работы.
• Элемент form имеет по умолчанию bottom-margin равный 1em. В браузере IE такой отступ присутствует вне зависимости от режима работы.

Вольный перевод оригинала.

Автор: Павел Кирсанов.

Интересное...

• ...httpd не запускается
• ...интересное о кубике - наука и жизнь
• ...живой журнал дмитрия медведева

Комментарии:

oqbo on Октябрь 14th, 2007 8:16 am
Спасибо за статью. Я как раз столкнулся с такой проблемой при вёрстке. С помощью вас исправил все ошибки.

never again on Октябрь 14th, 2007 11:29 am
рад, что смог помочь!
ради этого и веду блог)

Призрак on Декабрь 25th, 2007 1:43 pm
свойство visible:hidden означает, что контент будет доступен, и при этом размеры блока не будут изменяться
Извините, но все таки это свойство называется overflow, а так статья хорошая, огромное спасибо. Лишний раз убеждает в том, что стоит использовать doctype и следовать стандартам во избежании проблем.

never again on Декабрь 25th, 2007 2:18 pm
Призрак: спасибо за внимательность, поправил)

Другие посты по этой теме: