Блочная модель IE и Doctype режимы

При разработке кроссбраузерных CSS стилей весьма важно знать 2 вещи:

    • боксовую модель Internet Explorer
    • версию IE и Doctype режим документа

IE и блочная модель

Зачастую старые версии IE отображают блочную модель не так, как это делают другие браузеры. Например, рисунок показывает отличия в вычислении ширины бокса в соответствии со стандартом и то, как это делают некоторые версии Internet Explorer.

Свойства блочных боксов в браузерах

Версии IE и Doctype режимы

Известно, например, что старенький Win/IE5 неверно интерпретирует блочную модель CSS. А Win/IE6 и Mac/IE5 интерпретируют модель правильно в том случае, если Doctype Web страницы указан полностью и корректно. Что это значит?

Все HTML страницы должны начинаться с указания типа документа Doctype. Это самый первый шаг в создании правильного HTML кода. Некоторые браузеры в зависимости от указанного Doctype имеют разные режимы отрисовки страницы. В IE существует 2 режима, зависящие от указанного Doctype: стандартный режим и режим совместимости.
Дело в том, что разные версии IE могут по разному отрисовывать содержимое одних и тех же страниц. В итоге это может привести к тому, что Web документы, например, ранее разработанные, могут просто «разваливаться» в некоторых версиях Internet Explorer. Для устранения этого противоречия в Microsoft ввели возможность отображения документов в соответствии с разными версиями браузера Microsoft. Вот Doctype страницы и определяет, в каком режиме будет отображаться страница. Режим отрисовки можно задавать вручную, например, в IE8 кнопкой F12 включается окно средств разработчика, в пункте меню «Режим обозревателя» которого вы можете выбрать версию IE для отображения.
При создании Web документа задать режим можно через тег:

<meta http-equiv="X-UA-Compatible" content="IE=ЗНАЧЕНИЕ" />

Величина ЗНАЧЕНИЕ может принимать такие значения

EmulateIE7 при наличии Doctype переключается в режим IE7, в противном случае в режим совместимости.

Установка режимов отображения IE через тег meta
ЗНАЧЕНИЕ Описание режима
5 Переключение в режим IE5, доктайп при этом игнорируется.
7 Переключение в режим IE7, доктайп при этом игнорируется.
8 Переключение в режим IE8, доктайп при этом игнорируется.
9 Переключение в режим IE9, доктайп при этом игнорируется.
EmulateIE8 При наличии Doctype переключается в режим IE8, в противном случае в режим совместимости.
EmulateIE9 При наличии Doctype переключается в режим IE9, в противном случае в режим совместимости.
Edge Устанавливается самый новый доступный режим отображения.

Дополнительные данные по использованию META тега для переключения режимов отображения можно посмотреть здесь и здесь.

Приводимая ниже таблица старых версий IE показывает режим отрисовки боксовой модели в зависимости от Doctype документа.

Режимы отображения блочнй модели в зависимости от типа документа Doctype
Используемый Doctype Win/IE5 Win/IE6 Mac/IE5
HTML 4.01 Transitional — отсутствует doctype Quirks Quirks Quirks
HTML 4.01 Transitional — в doctype отсутствует URL Quirks Quirks Quirks
HTML 4.01 Transitional — корректный doctype Quirks Standards Standards
XHTML 1.0 Transitional — отсутствует doctype Quirks Quirks Quirks
XHTML 1.0 Transitional — в doctype отсутствует URL Quirks Quirks Standards
XHTML 1.0 Transitional — корректный doctype Quirks Quirks Standards
XHTML 1.0 Transitional — отсутствует Prolog Standards Standards Standards
XHTML 1.0 Transitional — отсутствует Prolog и URL Standards Standards Standards

Источник:  http://css.maxdesign.com.au/listamatic/about-boxmodel.htm

Оставьте комментарий