Список всего, что не работает корректно в причудливом режиме?

Вот сводная информация о режимах причудливого поведения браузера:

Некоторые функции HTML5 не поддерживаются некоторыми версиями IE. Например, IE 9 не распознает элемент холста в Quirks Mode.

Блочная модель неверна (отличается от спецификаций CSS, хотя, возможно, интуитивно более естественна). Это означает, что свойства ширины и высоты определяют размеры всего блока элемента, включая отступы и границы, а не только содержимое элемента. (Далее в этом документе есть демонстрация.)

На размеры незаменяемых встроенных элементов (например, элементов span по умолчанию) влияют свойства ширины и высоты (в то время как согласно спецификациям CSS они должны игнорироваться).

Процент высоты для элементов (например, <table height="100%"> в HTML или table { height: 100% } в CSS) применяется с использованием доступной высоты в качестве ссылки, даже если объемлющий блок имеет высоту: авто (по умолчанию). В стандартном режиме высота определяется требованиями контента; но процентная высота работает, когда высота окружающего блока установлена ​​на определенное значение.

Высота элемента body равна 100%, а не определяется его содержимым. (Если вы хотите 100% высоты тела в стандартном режиме, установите html, body { height: 100% } в CSS.)

Ширина текстовой области рассчитывается по-разному. Например, в IE 9 cols=5 делает область шириной 5 символов в стандартном режиме и только 4 символа в режиме Quirks.

Переполнение лечится расширением окна. Когда содержимое элемента не соответствует указанным для него размерам (явно или неявно), тогда overflow: visible (значение по умолчанию) означает, что содержимое переполняется, пока размеры блока соответствуют указанным. В режиме Quirks размеры меняются; это можно легко увидеть, например. если поле имеет цвет фона или границу.

Замещающий текст не всегда отображается в качестве замены изображения, когда изображение не отображается. Когда размер элемента img меньше, чем необходимо для текста, например. как в <img src="x.png" alt="Some alt text" width="8" height="9">, когда x.png не существует. Firefox опускает текст и показывает общий значок только для поврежденного изображения.

Корневой элемент — это элемент body в IE в Quirks Mode. По спецификациям это элемент html. Например, установка поля или ширины для основного текста не действует в режиме Quirks. В качестве другого примера, IE имеет вертикальную полосу прокрутки по умолчанию, хотя она неактивна (тусклая), когда нечего прокручивать, и вы можете удалить ее (когда она не нужна) в Quirks Mode, установив body { overflow: auto; }, но в Standard Mode, вам также нужно добавить html { overflow: auto; }.

В некоторых версиях IE по умолчанию отображается серая граница страницы шириной 2 пикселя. В некоторых случаях его можно изменить или удалить, установив свойство границы элемента html (например, html { border: 0; }).

Значения атрибута id сопоставляются без учета регистра, так что, например. селектор CSS #foo соответствует элементу с id="Foo". По спецификациям совпадение должно быть чувствительным к регистру: #foo соответствует только элементу с id="foo".

Отступы для изображения игнорируются, если они установлены в CSS для элемента img или элемента input type="image". Горизонтальное поле по умолчанию для плавающего изображения составляет три пикселя (вместо нуля). То есть, если элемент img имеет атрибут align="left" или align="right" или если к нему применяется правило CSS float: left или float: right, браузер ведет себя так, как если бы элемент img имел атрибут hspace= «3» (или его свойства margin-left и margin-right имели значение 3px). Это относится к IE; в других браузерах Quirks Mode может вызвать дополнительное поле только с одной стороны изображения, а его ширина может быть 2 пикселя вместо 3.

Вертикальное выравнивание изображения при определенных условиях выполняется по низу окружающего блока, а не по базовой линии текста. Это происходит, когда изображение является единственным содержимым элемента, обычно ячейки таблицы. Это означает, что, например. изображение в ячейке таблицы по умолчанию находится внизу ячейки в необычном режиме (что часто требуется автору), тогда как в стандартном режиме под изображением есть интервал в несколько пикселей (если только не установлено, например, вертикальное выравнивание: внизу для элемента img).

Рендеринг текста в IE 9 не использует несколько новых функций браузера в режиме совместимости. Это может, например. сделать ширину, необходимую для некоторого текста, разной в разных режимах, тем самым влияя на разделение текста на строки. См. документ Майкрософт о рендеринге текста в Windows Internet Explorer 9.

Центрирование блока в CSS с использованием, например. margin: 0 auto не работает. Примечание. В IE до IE 7 установка align="center" в HTML или text-align: center в CSS для блока div неправильно центрирует любой элемент внутреннего блока в целом, даже в стандартном режиме. В IE 8 это происходит только в Quirks Mode,

Свойства шрифта не наследуются от тела или других вмещающих элементов в таблицы. Это происходит в первую очередь для размера шрифта, но также может произойти с начертанием шрифта, цветом и высотой строки. Например, если вы установите body { font-family: Arial }, возможно, шрифт в ячейках таблицы останется шрифтом браузера по умолчанию.

В настройке размера шрифта для ячейки таблицы процентное значение интерпретируется как отношение к основному размеру шрифта браузера, а не к размеру шрифта, который применяется к вмещающему элементу (строке таблицы) согласно спецификациям CSS.

Ключевые слова размера шрифта интерпретируются неправильно, так что средний размер больше основного размера шрифта браузера, а маленький равен этому основному размеру шрифта. Точно так же вся шкала ключевых слов xx-маленький, x-маленький, маленький, большой, x-большой, xx-большой интерпретируется систематически неправильно: каждое значение интерпретируется как на один шаг больше, чем должно.

В IE 9 рендеринг шрифтов отличается. В стандартном режиме применяются более продвинутые технологии. Это вызывает небольшую разницу, которая может иметь значение, влияя, среди прочего, на ширину текста. См. раздел О рендеринге текста в Windows Internet Explorer 9.

Ключевые слова ширины границы тонкие, средние и толстые имеют разные значения в IE. Например, тонкий — это 1 пиксель в стандартном режиме и 2 пикселя в необычном режиме.

Атрибут bordercolor, который является нестандартным, но широко поддерживается, обрабатывается IE по-разному в режимах Quirks и Standards. Цвета отображаются по-разному, хотя это, по-видимому, вызвано влиянием на стиль границы.

Переключатели и флажки имеют общий размер 20 на 20 пикселей в IE в режиме Quirks, в отличие от 13 на 13 в стандартном режиме и в других браузерах. Размер графической кнопки или блока тот же, но расстояние вокруг него другое. Это неотъемлемая часть рендеринга элемента, на которую не влияют свойства отступов или полей, но на которые влияют свойства ширины и высоты.

Неправильно сформированные значения свойств часто интерпретируются на основе догадок, например. поле: 10 как поле: 10px и цвет: ffffff как цвет: #ffffff. Это нарушает обязательные правила обработки ошибок в CSS: правило, использующее синтаксически неверное значение, игнорируется.

Неверные значения свойства, которые не распознаются браузером, могут привести к игнорированию более ранней настройки свойства. Например, установка h1 { color: red; color: nonsense; } может привести к игнорированию всего правила; согласно спецификациям правильная настройка color: red имеет преимущественную силу. Такие повторяющиеся настройки часто используются в попытке обеспечить запасной вариант при использовании расширенных значений CSS, и это часто не удается в режиме Quirks, поскольку резервный вариант игнорируется. Проблема проявляется только в правиле CSS, поэтому разделение правила на две части может помочь. Например, вместо h1 { color: #ccc; color: rgba(255, 255, 255, 0.7); } вы должны использовать h1 { color: #ccc; } h1 { color: rgba(255, 255, 255, 0.7); }.

Регистр букв считается несущественным в селекторах классов и идентификаторов в CSS. Таким образом, селектор .foo соответствует элементу с class="Foo" или class="FOO". Согласно спецификациям CSS, регистр имеет большое значение в этих контекстах. Неверные имена допускаются в селекторах классов и идентификаторов. В частности, принимаются имена, начинающиеся с точки или знака числа (например, в селекторах .123a и #42).

Объявление white-space: pre игнорируется.

Фиксированное позиционирование не поддерживается: объявление position: fixed рассматривается как position: static (в IE 7).

Многие стандартные (CSS 2.1) дополнения к поддержке CSS (например, свойство max-width и селекторы атрибутов) в IE 7 не используются в Quirks Mode. То есть есть много функций CSS, которые не поддерживались в IE 6 и поддерживаются в IE 7, но только в стандартном режиме. См. запись в блоге Microsoft Подробности о наших изменениях CSS для IE7.

Некоторые нестандартные функции CSS (функции, которых нет в CSS 2.1), такие как свойства полосы прокрутки, распознаются некоторыми версиями IE и Opera в режиме совместимости, но игнорируются в режиме стандартов. В IE 8 и более поздних версиях это также относится к конструкции expression().

Установка rowspan=0 или colspan=0 во многих браузерах игнорируется, даже если они поддерживают эти настройки в стандартном режиме. (Они означают, что ячейка охватывает остальную часть строки или столбца. Это было реализовано в браузерах относительно недавно.)

Парсинг супа тегов. Например, если документ содержит разметку <p>text<table>...</table>, то, например. Firefox в Quirks Mode рассматривает элемент p как содержащий элемент table. В стандартном режиме начальный тег таблицы неявно закрывает открытый элемент p. Разницу можно увидеть, если вы, например. установите границу элемента p. Точно так же, например, Firefox принимает элемент ul внутри элемента шрифта. В таких случаях IE всегда работает по неправильным правилам, даже в стандартном режиме, но поведение, соответствующее стандартам, может быть достигнуто за счет использования допустимой разметки и всегда использования явных конечных тегов, таких как </p>, даже если они формально необязательны.

Различная обработка супа тегов. Более или менее противоположная проблема заключается в том, что в Quirks Mode разметка вроде <font color=red><table>...</table></font> не влияет на цвет текста внутри таблицы. В стандартном режиме это так, даже несмотря на то, что разметка нестандартна (недействительна согласно всем спецификациям HTML)!

Пробелы между элементами могут быть значительными. Например, допустим, у вас есть список ссылок. Обычно вы пишете разметку с разрывами строк между элементами списка, элементами li (то есть между тегами </li> и <li>):

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

Однако, если вы установите display: block и границу для элементов ссылки, вы можете получить вертикальные промежутки (пустые строки) между полями. Это происходит в IE 7 в Quirks Mode и всегда в предыдущих версиях IE. С другой стороны, для приведенной выше разметки, если вы установите display: inline для элементов li, тогда между полями элементов в IE в Quirks Mode не будет пробела. В стандартном режиме и в других браузерах есть пробел, соответствующий одному пробелу, и некоторые считают, что это соответствует стандартам.

Формы имеют нижнее поле по умолчанию 1em или около того в некоторых браузерах. (В IE 7 такое поле есть в обоих режимах.) Это, по-видимому, предназначено для продолжения традиции веб-браузеров оставлять такое большое расстояние под формой. Раньше часто задавали вопрос, как избавиться от пустой строки после формы.

Вертикальные поля по умолчанию подавляются в некоторых контекстах, например. когда элемент p появляется как первый элемент в элементе td. Это более или менее традиционное поведение в браузерах, и оно происходит в IE 7 в обоих режимах (в IE 8 только в Quirks Mode). Проблема не возникает, если вертикальные поля соответствующих элементов установлены явно в CSS.

Эффекты всплывающей подсказки для элементов img основаны на атрибутах alt в некоторых браузерах старого стиля, включая IE 8 в режиме Quirks, но не в стандартном режиме.

Разметка wbr для возможности разрыва строки учитывается. Браузеры широко поддерживают его, но IE 8 перестал делать это в «стандартном режиме». Это плохая новость, так как теги <wbr> были единственным эффективным способом предложить возможности разрыва строки для иначе неразрывных строк на веб-страницах.

Браузеры Mozilla (такие как Firefox и Seamonkey) имеют некоторые дополнительные функции, описанные в файле quirk.css. Например, цвет границ таблицы по умолчанию — серый (как и в большинстве других браузеров), в отличие от использования основного цвета таблицы, как в стандартном режиме. Примечание. Не все настройки в этом файле применимы ко всем версиям Mozilla.

Некоторые функции DOM недоступны. Например, в Quirks Mode IE 9 не распознает метод getElementsByClassName (который хорошо поддерживается другими браузерами и включен в HTML5).

Так называемый именованный доступ к объекту Window, такой как использование (в JavaScript) window.foo, window['foo'] или просто foo для ссылки на элемент с id="foo" возможен в Quirks Mode только в некоторых версиях. из Firefox. (Однако в версии 15 восстановлена ​​поддержка этой устаревшей функции в обоих режимах.)

В Firefox коллекция document.all (в JavaScript) распознается только в режиме Quirks.

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

В Firefox в специальном режиме в спецификации FRAMESET cols/rows 0* рассматривается как 1*

И некоторые причуды CSS:

Причуда цвета без хэша

Причуда безразмерной длины

Причуда расчета высоты строки

Блоки игнорируют причуды высоты строки

Причуда расчета процентной высоты

Элемент html заполняет причуду области просмотра

Элемент body заполняет причуду элемента html

Причуда вычисления ширины ячейки таблицы

Ячейка таблицы теперь использует причуду расчета минимальной ширины

Причуда рушащегося стола

Оформление текста не распространяется на причуду таблиц

Столы наследуют цвет от причуды тела

Причуда размера поля высоты ячейки таблицы

Причуда :active и :hover

Ссылки

• Что происходит в режиме Quirks в веб-браузерах?

• Стандартный режим Quirks

• Поведение причудливого режима Mozilla — Mozilla | MDN

• Режим совместимости HTML5 Quirks в IE10 – IEБлог

• HTML 5.2: Раздел 10. Рендеринг