Что делает <meta http-equ = "X-UA-Compatible" content = "IE = edge">? - PullRequest
Новая
       74

Что делает <meta http-equ = "X-UA-Compatible" content = "IE = edge">?

1319 голосов
/ 21 июля 2011

Какая разница, если одна веб-страница начинается с 

<!DOCTYPE html> 
<html> 
  <head> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

и если страница начинается с 

<!DOCTYPE html> 
<html> 
  <head> 
     <!-- without X-UA-Compatible meta -->

Если нет никакой разницы, я полагаю, что могу просто игнорировать X-UA-Compatible мета-заголовок, так как я просто хочу, чтобы он отображался в большинстве стандартных режимов во всех версиях IE.

Ответы [ 12 ]

1589 голосов
/ 21 июля 2011

Обновление за октябрь 2015 года

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

В зависимости от того, какие браузеры Microsoft вы поддерживаете, вам может не понадобиться продолжать использовать тег X-UA-Compatible. Если вам нужно поддерживать IE9 или IE8, то я бы порекомендовал использовать тег. Если вы поддерживаете только самые последние версии браузеров (IE11 и / или Edge), я бы рекомендовал вообще отказаться от этого тега. Если вы используете Twitter Bootstrap и вам необходимо исключить предупреждения проверки, этот тег должен отображаться в указанном порядке. Дополнительная информация ниже:

Метатег X-UA-Compatible позволяет веб-авторам выбирать, в какой версии Internet Explorer должна отображаться страница. IE11 внес изменения в эти режимы; см. примечание IE11 ниже. Microsoft Edge , браузер, который заменил IE11, учитывает только метатег X-UA-Compatible в определенных обстоятельствах. См. Примечание Microsoft Edge ниже.

Согласно Microsoft, при использовании тега X-UA-Compatible он должен быть максимально высоким в вашем документе head:

Если вы используете мета-тег X-UA-Compatible, вы хотите разместить его как можно ближе к верху заголовка страницы. Internet Explorer начинает интерпретацию разметки с использованием последней версии. Когда Internet Explorer обнаруживает мета-тег, совместимый с X-UA, он запускается заново с использованием механизма указанной версии. Это снижение производительности, поскольку браузер должен остановиться и перезапустить анализ содержимого.

Вот ваши варианты:

  • "IE = край"
  • "IE = 11"
  • "IE = EmulateIE11"
  • "IE = 10"
  • "IE = EmulateIE10"
  • "IE = 9"
  • "IE = EmulateIE9
  • "IE = 8"
  • "IE = EmulateIE8"
  • "IE = 7" * * тысяча пятьдесят-одна
  • "IE = EmulateIE7"
  • "IE = 5"

Чтобы попытаться понять, что означает каждый из них, вот определения, предоставленные Microsoft:

Internet Explorer поддерживает несколько режимов совместимости документов, которые включают различные функции и могут влиять на способ отображения содержимого:

  • В пограничном режиме Internet Explorer отображает содержимое в самом высоком доступном режиме. В Internet Explorer 9 это эквивалентно режиму IE9. Если в будущем выпуске Internet Explorer будет поддерживаться режим более высокой совместимости, страницы, переведенные в граничный режим, будут отображаться в самом высоком режиме, поддерживаемом этой версией. Те же самые страницы будут по-прежнему отображаться в режиме IE9 при просмотре в Internet Explorer 9. Internet Explorer поддерживает несколько режимов совместимости документов, которые включают различные функции и могут влиять на способ отображения содержимого:

  • Режим IE11 обеспечивает высочайшую поддержку, доступную для существующих и развивающихся отраслевых стандартов, включая HTML5, CSS3 и другие.

  • Режим IE10 обеспечивает высочайшую поддержку, доступную для существующих и развивающихся отраслевых стандартов, включая HTML5, CSS3 и другие.

  • Режим IE9 обеспечивает высочайшую поддержку, доступную для установленных и разрабатываемых отраслевых стандартов, включая HTML5 (рабочий проект), спецификацию каскадных таблиц стилей W3C уровня 3 (рабочий проект), спецификацию масштабируемой векторной графики (SVG) 1.0 и другие. [Примечание редактора: IE 9 не поддерживает анимацию CSS3].

  • Режим IE8 поддерживает множество установленных стандартов, включая спецификацию каскадных таблиц стилей W3C уровня 2.1 и API селекторов W3C; он также предоставляет ограниченную поддержку спецификации уровня 3 каскадных таблиц стилей W3C (рабочий проект) и других появляющихся стандартов.

  • В режиме IE7 содержимое отображается так, как если бы оно отображалось в стандартном режиме Internet Explorer 7, независимо от того, содержит ли страница директиву.

  • В режиме эмуляции IE9 Internet Explorer использует директиву для определения способа отображения содержимого.Директивы стандартного режима отображаются в режиме IE9, а директивы режима совместимости отображаются в режиме IE5.В отличие от режима IE9, режим эмуляции IE9 соответствует директиве.

  • В режиме эмуляции IE8 Internet Explorer использует директиву для определения способа визуализации содержимого.Директивы режима стандартов отображаются в режиме IE8, а директивы режима причуд - в режиме IE5.В отличие от режима IE8, в режиме эмуляции IE8 соблюдается директива.

  • В режиме эмуляции IE7 Internet Explorer использует директиву для определения способа визуализации содержимого.Директивы режима стандартов отображаются в стандартном режиме Internet Explorer 7, а директивы режима причуд отображаются в режиме IE5.В отличие от режима IE7, режим эмуляции IE7 соответствует директиве.Для многих веб-сайтов это предпочтительный режим совместимости.

  • В режиме IE5 содержимое отображается так, как если бы оно отображалось в режиме «причуд» Internet Explorer 7, что очень похоже на то, как оно было.отображается в Microsoft Internet Explorer 5.

IE10 ПРИМЕЧАНИЕ. Начиная с IE10, режим причуд действует по-другому, чем в предыдущемверсии браузера.В IE9 и более ранних версиях режим причуд ограничивал веб-страницу функциями, поддерживаемыми IE5.5.В IE10 режим quirks соответствует различиям, указанным в спецификации HTML5.

Лично я всегда выбираю метатег http-equiv="X-UA-Compatible" content="IE=edge", так как в старых версиях есть множество ошибок, и я не хочу, чтобы IE решалперейдите в «Режим совместимости» и покажите мой сайт как IE7 против IE8 или 9. Я всегда предпочитаю последнюю версию IE.

IE11

С Microsoft :

Начиная с IE11, режим краяпредпочтительный режим документа;он обеспечивает высочайшую поддержку современных стандартов, доступных для браузера.

Используйте декларацию типа документа HTML5 для включения режима края:

<!doctype html>

Режим края был введен вInternet Explorer 8 и был доступен в каждом последующем выпуске.Обратите внимание, что функции, поддерживаемые пограничным режимом, ограничены функциями, поддерживаемыми конкретной версией браузера, отображающей содержимое.

Начиная с IE11, режимы документов устарели и больше не должны использоваться, кроме как на временной основе,Обязательно обновляйте сайты, которые используют устаревшие функции и режимы документов, чтобы они соответствовали современным стандартам.

Если необходимо настроить таргетинг на определенный режим документов, чтобы ваш сайт функционировал, пока вы переделываете его для поддержки современных стандартов и функций, имейте в видучто вы используете переходную функцию, которая может быть недоступна в будущих версиях.

Если вы в настоящее время используете x-ua-совместимый заголовок для таргетинга на устаревший режим документа, возможно, ваш сайт не будетотразить лучший опыт, доступный с IE11.

Microsoft Edge (замена для Internet Explorer, который поставляется в комплекте с Windows 10)

Информация о X-UA-Compatible метатеге для "Edge" версии IE. От Microsoft :

Представление «живого» режима Edge для документов

Как мы объявили в августе 2013 года, мы не поддерживаем режимы документовпо состоянию на IE11.С нашими последними обновлениями платформы потребность в устаревших режимах документов в основном ограничивается устаревшими веб-приложениями Enterprise.С новыми архитектурными изменениями эти устаревшие режимы документов будут изолированы от изменений в «живом» режиме Edge, что поможет гарантировать гораздо более высокий уровень совместимости для клиентов, которые зависят от этих режимов, и поможет нам еще быстрее перейти к улучшениям в Edge,IE по-прежнему будет поддерживать режимы документов, обслуживаемые сайтами интрасети, сайтами в списке совместимости и только при использовании в режиме предприятия.

Общедоступные интернет-сайты будут отображаться с новой платформой режима Edge (без учета X-UA-совместимого).Нашей целью является то, что отсюда Edge является «живым» режимом документа, и дальнейшие режимы документов не будут введены в дальнейшем.

С изменениями в Microsoft Edge, которые больше не поддерживают режимы документов в большинствеВ некоторых случаях у Microsoft есть инструмент для сканирования вашего сайта и проверки наличия кода, несовместимого с Edge.

Chrome = 1 Информация для IE

Существует также chrome=1, который вы можете использовать или использовать вместе с одним из вышеуказанных параметров, таких как: <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">.chrome=1 предназначен для Google Chrome Frame, который определяется как:

Google Chrome Frame - это подключаемый модуль браузера с открытым исходным кодом.Пользователи, у которых установлен подключаемый модуль, имеют доступ к открытым веб-технологиям Google Chrome и быстрому механизму JavaScript при открытии страниц в браузере.

Google Chrome Frame без проблем расширяет возможности просмотра в Internet Explorer.Он отображает сайты с поддержкой Google Chrome Frame с использованием технологии рендеринга Google Chrome, предоставляя вам доступ к новейшим функциям HTML5, а также к функциям и функциям безопасности Google Chrome без какого-либо прерывания вашего обычного использования браузера.

Когда Google Chrome FrameПосле того, как вы установите этот плагин, вы должны использовать chrome=1 в метатеге X-UA-Compatible.

Более подробную информацию о Chrome Frame можно найти здесь .

Примечание: Google Chrome Frame работает только для IE6 - IE9 и был уволен 25 февраля 2014 года. Более подробную информацию можно найти здесь .Спасибо @mck за ссылку.

Проверка:

HTML5 :

Страница будет подтверждена с использованием W3Валидатор только при использовании <meta http-equiv="X-UA-Compatible" content="IE=Edge">.Для других значений он выдаст ошибку: A meta element with an http-equiv attribute whose value is X-UA-Compatible must have a content attribute with the value IE=edge. Другими словами, если у вас есть IE=edge,chrome=1, он не будет проверен.Я полностью игнорирую эту ошибку, так как современные браузеры просто игнорируют эту строку кода.

Если у вас должен быть полностью допустимый код, рассмотрите возможность сделать это на уровне сервера, установив заголовок HTTP.В качестве примечания Microsoft говорит, If both of these instructions are sent (meta and HTTP), the developer's preference (meta element) takes precedence over the web server setting (HTTP header). См. ответ olibre или bitinn's answer для получения дополнительной информации о том, как установить HTTP-заголовок.

XHTML

Нет проблем с проверкой при использовании <meta http-equiv="X-UA-Compatible" content="IE=Edge" />, если тег правильно закрыт (т. Е. /> против >).

TwitterBootstrap

Этот тег настоятельно рекомендуется командой Bootstrap как минимум с 2014 года, а Bootlint , линтер, созданный командой twbs, продолжает выдавать предупреждение когда тег опущен.ЛИНТЕР различает предупреждения и ошибки, и поэтому серьезность пропуска этого тега может считаться незначительной.

Подробнее о X-UA-Compatible см. веб-сайт Microsoft, определяющий совместимость документов .

Подробнее о том, что поддерживает IE, см. caniuse.com .

Подробнее о требованиях Twitter Bootstrap см. В проекте bootlint вики-страница .

320 голосов
/ 20 января 2012

Использование content="IE=edge,chrome=1" & emsp; Пропустить другие X-UA-Compatible режимы 

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

  • Нет значка совместимости
    В адресной строке IE9 не отображается кнопка Просмотр совместимости
    , и на странице также не отображается беспорядочная неуместные меню, изображения и текстовые поля.

  • Функции
    Этот метатег необходим для включения javascript::JSON.parse() в IE8
    (даже при наличии <!DOCTYPE html>)

  • Правильность
    Рендеринг / выполнение современного HTML / CSS / JavaScript более корректно (приятнее).

  • Производительность
    Механизм рендеринга Trident должен работать быстрее в режиме edge .

* * Использование тысячи сорок-девять

В вашем HTML 

<!DOCTYPE html> 
<html> 
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  • IE=edge означает, что IE должен использовать самую последнюю (передовую) версию своего движка рендеринга
  • chrome=1 означает, что IE должен использовать Chrome Rendering Engine , если установлен

Или лучше в конфигурации вашего веб-сервера:
(см. также ответ RiaD )

  • Apache в соответствии с предложением pixeline 

    <IfModule mod_setenvif.c>
  <IfModule mod_headers.c>
    BrowserMatch MSIE ie
    Header set X-UA-Compatible "IE=Edge,chrome=1" env=ie
  </IfModule>
</IfModule>
<IfModule mod_headers.c>
  Header append Vary User-Agent
</IfModule>

  • Nginx в соответствии с предложением Stef Pause 

    server {
  #...
  add_header X-UA-Compatible "IE=Edge,chrome=1";
}

  • Лак прокси, предложенный Лукас Рютцель 

    sub vcl_deliver {
  if( resp.http.Content-Type ~ "text/html" ) {
    set resp.http.X-UA-Compatible = "IE=edge,chrome=1";
  }
}

  • IIS (начиная с версии 7) 

    <configuration>
  <system.webServer>
     <httpProtocol>
        <customHeaders>
           <add name="X-UA-Compatible" value="IE=edge,chrome=1" />
        </customHeaders>
     </httpProtocol>
  </system.webServer>
</configuration>

Microsoft рекомендует Режим Edge с IE11

Как заметил Линда (см. Комментарии), Изменения совместимости в IE11 рекомендует Режим Edge :

Начиная с IE11, режим края является предпочтительным режимом документа; он представляет самую высокую поддержку современных стандартов, доступных для браузера.

Но позиция Microsoft была неясна. Другая Страница MSDN не рекомендовала Режим Edge :

Поскольку в режиме Edge все страницы открываются в стандартном режиме, независимо от версии Internet Explorer, у вас может возникнуть желание использовать это для всех страниц, просматриваемых с помощью Internet Explorer. Не делайте этого, так как заголовок X-UA-Compatible поддерживается только при запуске с Windows Internet Explorer 8.

Вместо этого Microsoft рекомендовала использовать <!DOCTYPE html>:

Если вы хотите открыть все поддерживаемые версии Internet Explorer ваши страницы в стандартном режиме, используйте объявление типа документа HTML5 [...]

Как объясняет Рикардо (в комментариях ниже), любой DOCTYPE (HTML4, XHTML1 ...) может использоваться для запуска режима стандартов, а не только HTML5 DOCTYPE. Важно всегда иметь DOCTYPE на странице.

Клара Онагер даже заметила в старой версии Указание устаревших режимов документов :

Режим Edge предназначен только для тестирования; не используйте его в производственной среде.

Это так сбивает с толку, что Усман Y думал Клара Онагер говорила о:

Пример [...] приведен только для иллюстрации; не используйте его в производственной среде. 

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

Хорошо ... В остальной части этого ответа я даю больше объяснений, почему использование content="IE=edge,chrome=1" является хорошей практикой в ​​производстве.

История

В течение многих лет (с 2000 по 2008 год) доля рынка IE составляла более 80% . И IE v6 считался стандартом de facto (доля рынка от 80% до 97% в 2003 , 2004, 2005 и 2006 только для IE6, большая доля рынка со всеми версиями IE).

Поскольку IE6 не соблюдал Веб-стандарты , разработчики имели для тестирования своего веб-сайта с использованием IE6. Эта ситуация была отличной для Microsoft (MS), так как веб-разработчикам приходилось покупать продуктов MS (например, IE нельзя использовать без покупки Windows), и было более выгодно оставаться несовместимым (то есть Microsoft хотела стать стандартом, исключая другие компании).

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

Однако в это время Mozilla начала разработку Firefox, максимально соблюдая все веб-стандарты (другой браузер был реализован для отображения страниц, как это сделал IE6). Поскольку все больше веб-разработчиков хотели использовать новые функции веб-стандартов, Firefox все больше и больше веб-сайтов поддерживали больше, чем IE.

Когда доля IE на рынке снижалась, MS поняла, что оставаться несовместимым со стандартом не очень хорошая идея. Поэтому MS начала выпускать новую версию IE (IE8 / IE9 / IE10), все больше и больше уважающую веб-стандарты.

Веб-несовместимая проблема

Но проблема заключается во всех веб-сайтах, разработанных для IE6: Microsoft не смогла выпустить новые версии IE, несовместимые с этими старыми веб-сайтами, разработанными для IE6. Вместо того, чтобы выводить версию IE для веб-сайта, MS попросила разработчиков добавить дополнительные данные (X-UA-Compatible) на свои страницы.

IE6 все еще используется в 2016 году

В настоящее время IE6 все еще используется (0,7% в 2016 году) (4,5% в январе 2014 года), а некоторые интернет-сайты по-прежнему совместимы только с IE6. Некоторые интранет-сайты / приложения тестируются с использованием IE6. Некоторые интранет-сайты работают на 100% только на IE6. Эти компании / отделы предпочитают отложить стоимость перехода: другие приоритеты, никто больше не знает, как реализован веб-сайт / приложение, обанкротился владелец устаревшего веб-сайта / приложения ...

Китай представляет 50% использования IE6 в 2013 году, но может измениться в следующие годы, так как Китайский дистрибутив Linux транслируется .

Будьте уверены в своих навыках работы в сети

Если вы (пытаетесь) соблюдать веб-стандарт, вы всегда можете просто использовать http-equiv="X-UA-Compatible" content="IE=edge,chrome=1". Чтобы сохранить совместимость со старыми браузерами, просто избегайте использования новейших веб-функций: используйте подмножество, поддерживаемое самым старым браузером, который вы хотите поддерживать. Или Если вы хотите пойти дальше, вы можете принять такие концепции, как Изящная деградация , Прогрессивное улучшение и Ненавязчивый JavaScript . (Вам также может быть приятно прочитать Что должен учитывать веб-разработчик? .)

Не заботьтесь о лучшем рендеринге версий IE: это не ваша работа, так как браузеры должны соответствовать веб-стандартам. Если ваш сайт соответствует стандарту и использует умеренно новейшие функции, следовательно, браузеры должны быть совместимы с вашим сайтом .

Более того, поскольку существует множество кампаний по убийству IE6 ( IE6 не более , MS кампания ), в настоящее время вы можете не тратить время на тестирование IE!

Личный опыт IE6

В 2009-2012 годах я работал в компании, использующей IE6, так как официальный единственный браузер допускал . Я должен был реализовать интранет-сайт только для IE6. Я решил соблюдать веб-стандарт, но используя подмножество IE6 (HTML / CSS / JS).

Это было сложно, но когда компания перешла на IE8, веб-сайт все еще хорошо отображался, потому что я использовал Firefox и firebug для проверки совместимости веб-стандарта;)

57 голосов
/ 25 марта 2013

Разница в том, что если вы укажете только DOCTYPE, IE 100 * * Compatibility View Settings будет иметь приоритет. По умолчанию эти настройки переводят все сайты интрасети в режим совместимости независимо от DOCTYPE. Также имеется флажок для использования представления совместимости для всех веб-сайтов, независимо от DOCTYPE.

IE Compatibility View Settings dialog

X-UA-Compatible переопределяет настройки представления совместимости, поэтому страница будет отображаться в стандартном режиме независимо от настроек браузера. Это заставляет режим стандартов для:

  • интранет-страницы
  • внешние веб-страницы, когда администратор компьютера выбрал «Отображать все веб-сайты в режиме совместимости» по умолчанию - подумайте о крупных компаниях, правительствах, университетах
  • когда вы непреднамеренно попадаете в список совместимости Microsoft
  • случаи, когда пользователи вручную добавляли ваш сайт в список в настройках просмотра в режиме совместимости

DOCTYPE один не может этого сделать; в этих случаях вы окажетесь в одном из режимов просмотра совместимости независимо от DOCTYPE.

Если указан тег meta и заголовок HTTP, тег meta имеет приоритет.

Этот ответ основан на изучении полных правил выбора режима документа в IE8 , IE9 и IE10 . Обратите внимание, что просмотр DOCTYPE - самый последний запасной вариант для выбора режима документа.

24 голосов
/ 13 февраля 2012

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

<meta http-equiv="X-UA-Compatible" content="IE=edge" />
22 голосов
/ 15 июня 2014

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

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

<!--[if IE]>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<![endif]-->

Это похоже на добавление любого другого условного выражения IE и работает только для IE, и никакие другие браузеры не будутбыть затронутым.

13 голосов
/ 05 ноября 2012

Я думаю, что эта диаграмма от Microsoft объясняет все.Чтобы сообщить IE, как отображать содержимое,! DOCTYPE должен работать с метатегом X-UA-Compatible.! DOCTYPE сам по себе не влияет на изменение режима документа IE.

enter image description here

http://ie.microsoft.com/testdrive/ieblog/2010/Mar/02_HowIE8DeterminesDocumentMode_3.png

11 голосов
/ 27 февраля 2013

Просто для полноты, вам на самом деле не нужно добавлять его в ваш HTML (который неизвестен http-эквивалент в HTML5)

Сделайте это и никогда не оглядывайтесь назад (первый пример для apache *)1004 *, секунда для nginx ) 

Header set X-UA-Compatible "IE=Edge,chrome=1"

add_header X-UA-Compatible "IE=Edge,chrome=1";
7 голосов
/ 17 сентября 2013 
<meta http-equiv="X-UA-Compatible" content="IE=Edge">

Чтобы эта строка работала должным образом, убедитесь, что:

  1. Это первый элемент сразу после <head>
  2. Нет условные комментарии используются перед метатегом, e. г. на элементе <html>

В противном случае некоторые версии IE просто игнорируют его.

UPDATE

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

Как заставить работать с условными комментариями.

Интересная статья о порядке элементов в голове. (blogs.msdn.com, для IE)

ССЫЛКА

Из документации MSDN :

X-UA-Compatible [...] должно появиться в заголовке веб-страницы (раздел HEAD) перед всеми остальными элементами, кроме элемента title и других метаэлементов.

6 голосов
/ 08 ноября 2017

Всего одно предложение, чтобы сказать Поручить Internet Explorer использовать новейший механизм рендеринга 

<meta http-equiv="x-ua-compatible" content="ie=edge">
4 голосов
/ 22 марта 2013

, если вы используете свой веб-сайт в той же сети, что и сервер, которому IE нравится переключаться в режим совместимости , несмотря на DOCTYPE.
Добавление meta http-equiv="X-UA-Compatible" content="IE=Edge" отключает это нежелательное поведение.

Страница:
...