Медная поляна

Вы никогда не задумывались, почему Internet Explorer на одних сайтах показывает значок представления совместимости, а на других — нет? Я вот недавно задумался, оказалось, все просто ;)

В адресной строке IE* изначально присутствует переключатель представления совместимости.

Кнопка представления совместимости в Internet Explorer

Кликнув на него, пользователь принудительно переводит браузер в режим эмуляции стнадартов IE7, т. е. браузер будет показывать сайт так, как бы он выглядел в Internet Explorer 7-ой версии. Для чего это нужно? По мнению Microsoft, если сайт сделан давно и отлично выглядит в IE7, в более современных версиях (IE8, IE9) он может отображаться некорректно. Упомянутый переключатель как раз необходим для того, чтобы исправить данный недочет.

Здравый смысл подсказывает, что если в последних версиях IE с сайтом все хорошо, то значок совместимости показывать не́зачем. Для владельцев сайтов единственным способом убрать переключатель из браузера посетителя является использование мета-тега X-UA-Compatible. Тег предназначен только для Internet Explorer, другие браузеры его игнорируют; тег управляет режимом рендеринга документов майкрософтовского браузера, попутно убирая кнопку представления совместимости из адресной строки (независимо от того, какой режим указан в самом теге).

Поскольку в нашем случае мета-тег используется только в качестве деактиватора кнопки, то с помощью его необходимо установить такой же режим документов, какой по умолчанию используется в браузере. Это можно сделать одной строкой, но двумя способами:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8; IE=EmulateIE9">

или

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Мета-тег нужно разместить внутри секции head HTML-документа c условием, что выше его могут располагаться только элемент <title>...</title> и другие мета-теги.

Увы, подробное описание режимов совместимости и тонкостях применения X-UA-Compatible выходит за рамки данной заметки. Желающим разобраться самостоятельно советую пару материалов. Надеюсь, после их прочтения будет понятно, почему в приведенных примерах используются именно такие значения атрибута content:

9 комментариев

Аноним

А в conditional comments его можно спрятать? Не проверял и не проверить сейчас, но интересно стало

@Аноним

Можно, но зачем? Тогда и кнопка исчезать не будет.

Аноним

Почему? Оставить только для всех IE, потому что остальным это незачем

А остальные данный мета-тег и не воспринимают. Попробуйте обернуть его в условные комментарии и посмотрите на результат. Кнопка не исчезнет.

inst

Chrome вроде бы тоже имеет виды на этот тег.

Но для него другие значения используются.

@inst

Да, только уточнение - речь идет о надстройке Chrome Frame для IE. И как там ведет себя кнопка я не проверял, все-таки вещь специфическая.

Маленькое уточнение. Может пригодиться.

Речь здесь не просто про мета тег, это meta http-equiv, т.е. механизм доведения до браузера той информации, что могла прийти в составе http заголовка.

Но есть проблема - meta http-equiv в Internet Explorer очень часто не срабатывает, например, как в случае использования boilerplate, когда до head встречаются conditional comments.

Тогда вместо meta http-equiv надо сформировать соответствующий http заголовок.

@SeVit

Спасибо за дополнение, про Boilerplate весьма ценно.

Познавательно. У меня тоже небольшое дополнение ;) На сайте самого майкрософта http://msdn.microsoft.com/ru-ru/cc817573.aspx имеется специальные разьяснения как для самых распространенных серверов настраивать отдачу заголовков с соответствующей meta для IE. Условные комментарии в случае с meta не работают. Проверено на собственном опыте IE8 не переходил в режим IE7. Так что, если хочется чтобы было и валидно и meta для IE работала, единственный способ отсылать соответствующие заголовки.

Еще вот статейка по этому поводу на солидном буржуйском бложике http://www.456bereastreet.com/archive/201103/x-ua-compatible_and_html5/