Коробка с cюрпризами

7 ноября 2008

Сначала мы боялись, потом вроде взяли себя в руки, приняв происходящее за простые и понятные фокусы. Сегодня пришло время удивляться снова — фокусы IE8 с переключением режимов рендеринга оказались хитрее, чем казалось поначалу. Что же мы знаем про магическую директиву X-UA-Compatible?

  • Эта директива в виде элемента <meta> должна присутствовать в документе.
  • В ней должно быть указано одно из двух типов значений: IE=x, где x — это обозначение желаемой версии движка или специальное ключевое слово EmulateIE7.
  • …и, в общем-то, всё.

Давайте проверим, скормив IE8 простой документ:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
  4. <head>
  5. <title>IE=x</title>
  6. <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
  7. <meta http-equiv="X-UA-Compatible" content="IE=x"/>
  8. <style type="text/css">
  9. BODY[class*='page'] {
  10. background:#090; /* IE8 и прочие современные */
  11. }
  12. *:first-child+HTML .page {
  13. background:#FC0; /* IE7, исключительно */
  14. }
  15. * HTML .page {
  16. background:#C00; /* IE6 и младше */
  17. }
  18. </style>
  19. </head>
  20. <body class="page"></body>
  21. </html>

Меняя значение IE=x последовательно — 8, 7, 6 — мы переключаем режимы рендеринга IE и получаем такой светофор:

  • IE8
  • IE7
  • IE6

Красивую расцветку обеспечили нам специальные CSS-фильтры для каждой версии IE:

  • E[att*='val'] — IE8 и прочие современные браузеры, селектор выборки подстрок атрибутов из черновика CSS 3. Да-да, из черновика, который IE8 не собирался поддерживать…
  • *:first-child+HTML E — IE7, исключительно. Просто милый хак, в очередной раз обыгрывающий странное понимание разработчиками IE понятия корневой элемент.
  • * HTML E — IE6 и младше, знаменитый Star HTML Hack, что бы мы без него делали.

Ну что — пока без сюрпризов, почти скучно. А давайте-ка подключим к документу фавиконку. Вставим её куда-нибудь в элемент <head>, произвольно:

  1. <head>
  2. <title>IE=x</title>
  3. <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
  4. <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>
  5. <meta http-equiv="X-UA-Compatible" content="IE=x"/>
  6. </head>

…и вот здесь начинается самое интересное — все документы позеленели, при любых значениях IE=x. И это фактически означает то, что IE8 просто перестал воспринимать директиву X-UA-Compatible.

Нет, дело совсем не в фавиконке. Дело в новом расположении элемента <meta> с нашей чудо-директивой. Теперь мета-информация о режиме рендеринга документа становится известна после появления первых элементов самого документа и успешно игнорируется.

В ходе тестов выяснилось, что предшествовать директиве могут только мета-элементы и <title> — по сути тоже часть мета-описания документа. Все остальные варианты расположения директивы делают её абсолютно неработоспособной.

Эксперименты это конечно хорошо, но хочется знать наверняка, поэтому полчаса копания в MSDN дали однозначный ответ в статье «Defining Document Compatibility» — все предположения оказались верны:

Являясь регистронезависимым, заголовок X-UA-compatible, тем не менее, должен находиться в секции HEAD страницы перед всеми остальными элементами, за исключением title и других мета-элементов.

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

Комментарии: добавить

Egor 7 ноября 2008 / 10:53

Спасибо, Вадим

Alexei 7 ноября 2008 / 13:57

Вадим, спасибо за статью!
Исправьте, пожалуйста, в примере незакрытый тег :)

Alexei 7 ноября 2008 / 13:58

Упс, забыл пресловутый сурс указать.
Незакрытый тег

  1. <html>
stolho 7 ноября 2008 / 15:42

Немного не в тему, но может кому-то поможет в будущем.
Заметил такую вещь, характерную для семейства IE.
Если в обычном CSS файле задать у любого элемента свойство background

  1. #sample{
  2. background:url(../img/sample.gif)top left repeat-x;
  3. }

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

  1. #sample{
  2. background:url(../img/sample.gif) top left repeat-x;
  3. }
Pchelobej 7 ноября 2008 / 15:59

Спасибо, надо проверить везде, где ужё успел вставить :)

uggallery 7 ноября 2008 / 17:31

О боги! Эта трабла станет хитом в форумах в ближайшие годы :)))

oracle 7 ноября 2008 / 19:46

А если не указывать директиву, то движок будет от ie8 ? Если это так и например мне нужен именно такой режим, то можно тогда не указывать эту директиву?

Михаил Валенцев 7 ноября 2008 / 23:10

Спасибо. Действительно будущий хит.

Михаил 8 ноября 2008 / 0:33

Отличная штучка из разряда «делайте всегда вооот так и проблем не будет». Итак, всегда ставим все мета-теги до тайтла и радуемся. Всё равно мета-тег, указывающий кодировку должен там стоять, вот и остальные пускай не разбредаются.

@stolho: С пробелами в css IE вообще своеобразно обходится. Так что тоже желательно ставить их везде, где не запрещено, имхо. Хуже не будет, а от необходимости помнить о потенциальных траблах самообороняемся.

pepelsbey 8 ноября 2008 / 1:16

всегда ставим все мета-теги до тайтла…

Вот-вот, именно поэтому при тестировании и не напарывался на эту проблему — аккуратизм и последовательность помогли )

feits 9 ноября 2008 / 0:15

это напоминает глюк с доктайпом в IE6. прям родовое проклятие Майкрософт ;)

sunnybear 17 ноября 2008 / 11:37

Для IE7 есть более изящный хак: *+HTML -- я был уверен, что та о нем знаешь :)

pepelsbey 17 ноября 2008 / 17:21

Исторически сложилось, что IE7 не приходится хакать, поэтому на уме был какой-то древний пример )

Frize 25 ноября 2008 / 17:45

Pepelsbey, давно читаю ваш блог, и вы не перестаете радовать.

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

  1. <meta http-equiv="X-UA-Compatible" content="EmulateIE7"/>

после чего правлю верстку под ie6-7 и не заморачиваюсь с отображением под ie8.

Александр 1 декабря 2008 / 0:49

Спасибо автору. Сразу же после прочтения заточил свои шаблоны под ие8.