Различие рендеринга в браузере между строгими / переходными DOCTYPE

Question

Некоторое время назад я столкнулся с «проблемой», с которой я так и не дошел до сути. Надеюсь, кто-нибудь может пролить свет на это. Что заставляет определенные браузеры (Chrome, Opera и Safari) отображать страницу по-разному, когда я изменяю DOCTYPE со строгого на переходный. Я знаю, что общей причиной этого является запуск режима "причуд", но XHTML и CSS для обоих файлов проверяются в соответствии с валидатором w3c.

Я могу только предположить, что эти браузеры используют разные внутренние таблицы стилей для двух DOCTYPE, но не имеют реального представления, почему они это делают. Я просто надеялся, что кто-нибудь сможет подтвердить, почему это происходит.

Разница, которую можно увидеть, - это расстояние между нижней частью «заголовка изображения» и границей строки меню. В вышеупомянутых браузерах нет разрыва между ними при использовании переходного DOCTYPE, но есть при использовании строгого (в IE и FF разрыв присутствует в обоих). В конце концов я понял, что добавление display:block к тегу img останавливает пробел, появляющийся во всех случаях (что и было моей целью).

переходный пример , строгий пример

Answer 1

Может показаться, что по умолчанию в строгом режиме изображение отображается как встроенный элемент.Встроенным элементам в нижней части дан пробел, чтобы учесть символы спуска, такие как g или q.Поскольку на изображении не должно быть символов-потомков, это считалось странным поведением, которое привело к введению «почти строгого» режима.В «почти строгом» режиме все теги img отображаются как display: block, а не как встроенные.Более подробную информацию можно найти здесь .

. Последняя часть головоломки состоит в том, что все современные браузеры отображают страницы со строгим DOCTYPE в «строгом» режиме и страницы с переходным DOCTYPE в «почти»строгий режим.Более подробную информацию можно найти здесь .

Большое спасибо Моисею и Райли, некоторая информация, предоставленная ими, помогла мне найти ответ.

Answer 2

Есть только несколько различий между Строгим и Переходным DOCTYPES, ни одно из которых действительно не объясняет это.(обратите внимание, у меня установлен только FF, IE, поэтому я не вижу саму ошибку).

Что касается причин, по которым это может произойти, это может быть случай, когда в браузере есть разные таблицы стилей для различного рендерингарежимы.Тем не менее, я думаю, что на самом деле все сводится к тому, что браузер использует разные подходы к отображению страницы для каждого режима Strict / Trans / Quirks / Frames.Хотя единственным документированным отличием между Strict и Trans является то, как обрабатывать встроенные изображения внутри таблиц, браузеры не должны придерживаться спецификаций W3C и могут делать все, что они действительно хотят, и это приводит к ошибкам, подобным тому, который вы, по-видимому, только что обнаружили.

Answer 3

Я не совсем понимаю эту причуду сам. Я думаю, что это связано с пустым пространством. В режиме причуд пустое пространство более щадящее. Однако в стандартах пробелы могут вызывать проблемы.

Например, в вашем примере у вас есть красивый украшенный источник, который легко читается. Удаление пробелов и разрывов строк между контейнерами и элементами позволит вам устранить пробел в некоторых браузерах (FF, я считаю). Чтобы исправить это в IE, вам нужно будет добавить line-height: 0; к содержащему элемент изображения (в данном случае содержащему якорь или тег ссылки).

Вы также должны заметить, что, если вас вообще волнует IE6, то, что каждый из ваших

в своей строке добавит дополнительные строки между каждым элементом списка при визуализации.