Тип документа HTML5 не запускает стандартный режим в IE8

Я работаю в компании, где все наши сайты в настоящее время используют переходный тип документа XHTML 1.0 (да, я знаю, что это очень старая школа). Я хочу изменить их все, чтобы использовать тип документа HTML5, поскольку он обратно совместим. Одна из причин, по которой я хочу сделать этот переход, заключается в том, что в IE8, если у кого-то установлены инструменты разработчика, старый док-тип XHTML переключает браузер в режим совместимости и отображает страницу как IE7. Прочитав его, я пришел к выводу, что тип документа HTML5 устанавливает любую страницу для рендеринга в стандартном режиме, но этого не происходит, когда я тестирую его на нашем промежуточном сервере, он все равно переключается в режим рендеринга IE7.

Странно то, что если я сохраню страницу с типом документа HTML5 локально и открою ее, она будет отображаться в стандартном режиме IE8. Должно быть что-то еще, что заставляет его упасть в совместимость с рендерингом IE7. Есть идеи, что это может быть?

Ниже приведен заголовок тестовой страницы, на которую я смотрел:

    <!DOCTYPE html >

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>

    <title>Burton - Mens Clothing - Mens Fashion - Burton Menswear</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <meta name="description" content="Burton is one of the UK's leading men's clothing &amp; fashion retailers, with a range of men's clothing designed to make you look &amp; feel good. Find formal &amp; casual clothes &amp; accessories for men online at Burton menswear"/>
    <meta name="keywords" content="menswear, clothes for men, clothing for men, men clothes, men's fashion, men's wear, men's clothing online, men's clothes online, men's clothes shop, burton men's, burton menswear, burton uk, burton"/>

    <script type="text/javascript">document.getElementsByTagName('html')[0].className = 'js';</script>

    <link rel="stylesheet" type="text/css" href="http://eu.burton-menswear.com/wcsstore/ConsumerDirectStorefrontAssetStore/images/colors/color2/v3/css/screen.css" />
    <link rel="stylesheet" type="text/css" href="http://eu.burton-menswear.com/wcsstore/ConsumerDirectStorefrontAssetStore/images/colors/color2/v3/css/print.css" media="print"/>

    <link rel="stylesheet" type="text/css" href="http://eu.burton-menswear.com/wcsstore/ConsumerDirectStorefrontAssetStore/images/colors/color2/v3/css/brand.css" />

    <!--[if lt IE 8]>
    <link rel="stylesheet" href="http://eu.burton-menswear.com/wcsstore/ConsumerDirectStorefrontAssetStore/images/colors/color2/v3/css/ie.css" type="text/css" media="screen, projection">
    <![endif]-->

    <meta http-equiv="content-language" content="en-gb" />

    <link rel="shortcut icon" type="image/x-icon" href="http://eu.burton-menswear.com/favicon.ico" />
    <link rel="search" type="application/opensearchdescription+xml" title="burton.co.uk Search"  href="http://eu.burton-menswear.com/burton-search.xml"/>
    <!-- Start Summit Tag -->
    <script type="text/javascript"> 
  var __stormJs = "t1.stormiq.com/dcv4/jslib/3286_D92B7532_4A18_46A8_864A_5FDF1DF25844.js";
</script>
    <script type="text/javascript" src="http://eu.burton-menswear.com/javascript/track.js"></script>
    <!-- End Summit Tag -->
    <!-- Start QuBit Tag -->
    <script src=//d3c3cq33003psk.cloudfront.net/opentag-31935-42109.js async defer></script>
    <!-- End QuBit Tag -->
    <link type="text/css" rel="stylesheet" href="http://reviews.br.wcstage.arcadiagroup.ltd.uk/bvstaging/static/6028-en_gb/bazaarvoice.css" ></link>

</head>

person El Guapo    schedule 12.11.2012    source источник
comment
Удар в темноте ... но попробуйте добавить это в свой <head>: <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">   -  person Labu    schedule 12.11.2012
comment
xmlns="http://www.w3.org/1999/xhtml" должно быть проблемой.   -  person xiaoyi    schedule 12.11.2012


Ответы (3)


В IE 8 есть несколько настроек, которые могут вызывать отображение страниц в режиме совместимости независимо от HTML-содержимого страницы или заголовков HTTP:

  1. Страница> Настройки просмотра в режиме совместимости

    • Если установлен флажок «Отображать сайты интрасети в режиме совместимости», IE будет отображать все сайты в локальной сети в режиме совместимости. (Это случалось со мной несколько раз во время разработки.)

    • Если установлен флажок «Включить обновленные списки веб-сайтов от Microsoft», IE загрузит список веб-сайтов от Microsoft и отобразит их все в режиме совместимости.

    • Если установлен флажок «Отображать все веб-сайты в режиме совместимости», то вы можете догадаться, что происходит.

  2. Инструменты> Свойства обозревателя> Дополнительно> Просмотр

    • If “Automatically recover from page layout errors with Compatibility View” is checked, then IE will sometimes switch to compatibility view if it thinks a page’s layout is broken.

  3. И, наконец, если вы перейдете на страницу, а затем нажмете «Страница»> «Просмотр совместимости» (или щелкните значок просмотра совместимости в адресной строке), эта страница будет отображаться в режиме совместимости.

Поэтому, хотя стоит указать X-UA-Compatible и использовать такой тип документа, как HTML5 (чтобы ваши намерения были ясны), всегда сначала проверяйте эти настройки при тестировании.

person Paul D. Waite    schedule 12.11.2012
comment
Спасибо, Пол, это действительно помогло. Установлен флажок Отображать сайты интрасети в режиме совместимости. Я думаю, что добавлю метатег X-UA-Compatible на всякий случай. - person El Guapo; 13.11.2012
comment
@ElGuapo: пожалуйста, меня это несколько раз ловило, как и тестеров, с которыми я работал. Немного раздражает то, что IE 8 имеет интерфейс настроек представления совместимости, который не содержит все параметры представления совместимости, но интрасеть, похоже, та, которая обычно сбивает людей с толку, и это понятно дефолт. - person Paul D. Waite; 13.11.2012

Я не уверен, поможет ли это, но в IE9 вы должны использовать:

<!DOCTYPE html>

и следующий метатег:

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

После тестирования комбинаций этих двух вещей я обнаружил:

  • Нет Doctype или Meta Tag:
    Quirks Mode, IE Engine = 5

  • Только Doctype:
    Standards Mode, IE Engine = 7

  • Doctype и Meta Tag
    Standards Mode, IE Engine = 9

  • Только метатеги
    стандартный режим, IE Engine = 9

Как определить тип режима и двигатель:

  • document.compatMode: CSS1Compat = стандартный режим, иначе вы находитесь в режиме причуд

  • document.documentMode: возвращает, какой движок IE использует для рендеринга документа.


Примечания:

  • Обычно Doctype должен быть первой строкой в ​​вашем файле. Я не уверен, но думаю, что ему может предшествовать тег XML. Если что-то еще предшествует этому, вы, вероятно, нарушите свое объявление doctype:
  • Мета-тег должен быть размещен в <HEAD>
  • Вашему сообщению 25 дней, поэтому я предполагаю, что у вас есть решение. Тем не менее, я не уверен, подходят ли эти настройки IE9 для вашей проблемы. Вам нужно будет изучить window.document.compatMode и window.document.documentMode, чтобы определить, жизнеспособны ли они в IE8.
  • Измените метатег на <meta http-equiv="X-UA-Compatible" content="IE=8">
  • Хотя можно использовать только метатег, я бы не рекомендовал использовать его без doctype. Поскольку это может вызвать проблемы с XML, CSS и скриптом

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

person RichC    schedule 08.12.2012
comment
Вы можете использовать HTTP-заголовок вместо <meta http-equiv="X-UA-Compatible" content="IE=9">, что может быть хорошей идеей, если вы можете сделать это, как метатег и условные комментарии могут создавать проблемы друг для друга. - person Paul D. Waite; 03.10.2013

И XHTML 1.0 Transitional doctype (когда используется спецификацией, с URL-адресом), и <!doctype html> запускают «Стандартный режим» в IE. Если этого не происходит, существует множество причин, которые, вероятно, не имеют ничего общего с изменением типа документа (и могут быть проанализированы только при наличии дополнительной информации, такой как URL-адрес); см. осложнения IE 8 и IE 9 в статье Активация режимов браузера с помощью Doctype .

Переход на <!doctype html> бессмыслен и представляет собой потенциальную проблему, если вы на самом деле не измените разметку. При проверке, которая является другой причиной использования doctype, она вызывает совершенно другой анализ и довольно часто сообщения об ошибках о конструкциях, которые допустимы в XHTML 1.0.

person Jukka K. Korpela    schedule 12.11.2012
comment
Привет, Юкка, изменение doctype на HTML5 кажется разумным, поскольку мы начинаем делать намного больше вещей HTML5 на наших сайтах (особенно видео) - и почему бы и нет, если он обратно совместим. С какими потенциальными проблемами я могу столкнуться, если изменю тип документа? - person El Guapo; 13.11.2012
comment
@ElGuapo: это будет означать, что валидаторы (например, validator.w3.org) будут проверять ваш код как HTML5. . Хотя HTML5 (насколько это возможно) обратно совместим с веб-браузерами, он не обратно совместим в том смысле, что весь HTML4 будет действительным HTML5. (См. w3.org/TR/html5-diff). Конечно, вы всегда можете проверить его как HTML 4 или вообще полностью игнорировать проверку, если хотите. - person Paul D. Waite; 13.11.2012
comment
Привет, Пол, спасибо. Я думаю, что это случай постепенного преобразования кода в HTML5, вместо того, чтобы делать это одним махом. К сожалению, у меня нет доступа к большей части разметки на сайтах, поскольку она заблокирована IBM, которая обеспечивает всю нашу внутреннюю поддержку. Что касается проверки кода, в идеальном мире все страницы на всех наших сайтах будут проверяться, но я точно знаю, что они этого не делают, и у меня просто нет времени, чтобы посвятить себя решению всех проблем. Таким образом, страницы, не прошедшие проверку, - это еще не конец света. - person El Guapo; 14.11.2012