Предлагаю писать существующие проблемы вёрстки при включении режима совместимости и способы их решения.

Вот список багов нашёл: Некорректная блочная модель (отличается от указанной в спецификации CSS, хотя возможно более интуитивно понятна). Это значит что значения width и height указывают на размеры блока всего элемента, включая padding и border, а не только контент элемента. (В файрфоксе стандартная блочная модель применяется в обоих режимах).

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

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

Переполнение (Overflow) обрабатывается как расширения области блока (box). Когда содержимое элемента не вмещается в отведённые размеры (полностью или частично), то overflow: visible (по умолчанию) значит что контент вылезает за указанные рамки. В режиме совместимости, сами размеры содержащего контент блока изменяются; это можно легко увидеть например если у области есть background-color или border.

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

Padding у изображений игнорируется когда задан в CSS для элемента img или элемента input type="image".

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

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

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

Центрирование блока в CSS используя например margin: 0 auto; не работает. Замечание: On IE (даже IE 7), установка align="center" в HTML или text-align: center в CSS для div некорректно центрует внутренний блочный элемент block как целое, даже в «стандартном режиме».

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

Если font size задаётся ячейке таблицы, процентное значение интерпретируется как относительное к обычному размеру шрифта браузера, а не к размеру шрифта внешнего элемента (например строке таблицы) по спецификации CSS.

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

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

Регистр букв не важен при использовании в классах (class) и идентефикаторах (id) в CSS. Т.е., селектор .foo выберет элемент с классом class="Foo" или class="FOO". По спецификации CSS, в этих случаях нужно быть чувствительным к регистру.

Некорректные имена допустимы в классах и id. Особенно имена начинающиеся с точки и цифрового знака (например селекторы .123a и #42) допустимы.

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

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

Множество дополнений к поддержке CSS (такие как max-width и селекторы аттрибутов) в IE 7 не работают в режиме совместимости.

Так например, есть много CSS особенностей которые не поддерживаются в IE 6 и поддерживаются в IE 7, Но только в режиме стандартов. Смотрите подробнее блог Microsoft Details on our CSS changes for IE7.

Обработка каши из тегов (tag soup parsing). Например, если документ содержит разметку Code

<p>text<table>...</table>

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

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

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

Однако, если вы зададите display: block и border для ссылок, вы увидите вертикальные пробелы (пустые строки) между областями. Это происходит в IE 7 в режиме совместимости, и всегда в предыдущих версиях IE.

У форм есть отступ снизу (bottom margin) в 1em (относительный размер шрифта) в Мозилле. (В IE, такой отступ в обоих режимах.) Это по-видимому одначает продолжение традиции браузеров оставлять подобное расстояние под формой. В общем случае решение в CSS для форм такое: style="display: inline; margin: 0;".

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

У семейства Mozill'ы (типа Firefox и Seamonkey) есть дополнительные особенности. Например, цвет по умолчанию для границ таблицы серый (как в большинстве других браузеров), А в стандартном режиме используется основной цвет таблицы (foreground). В таких аспектах, режимы очень отличаются. (Не все правила применяются ко всем версиям Мозиллы).

Источник: www.Usabili.ru