Для X-UA-Compatible задано значение IE = edge, но он по-прежнему не останавливает режим совместимости


248

Я довольно смущен. Я должен быть в состоянии установить

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

и IE8 и IE9 должны визуализировать страницу с использованием новейшего движка рендеринга. Тем не менее, я только что проверил его, и если режим совместимости включен в другом месте на нашем сайте, он останется для нашей страницы , даже если мы должны заставить его не делать этого.

Как вы должны убедиться, что IE не использует режим совместимости (даже в интрасети)?

FWIW, я использую объявление HTML5 DocType ( <!doctype html>).

Вот первые несколько строк страницы:

<!doctype html> 
<!--[if lt IE 7 ]> <html lang="en" class="innerpage no-js ie6"> <![endif]--> 
<!--[if IE 7 ]>    <html lang="en" class="innerpage no-js ie7"> <![endif]--> 
<!--[if IE 8 ]>    <html lang="en" class="innerpage no-js ie8"> <![endif]--> 
<!--[if (gte IE 9)|!(IE)]><!--> 
<html lang="en" class="innerpage no-js"> 
<!--<![endif]--> 
    <head> 
        <meta charset="ISO-8859-1" /> 
        <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 

РЕДАКТИРОВАТЬ: я только что узнал, что по умолчанию в IE8 используется режим совместимости IE7 для сайтов интрасети. Будет ли это переопределять метатег X-UA-Compatible?


У меня тоже есть эта проблема с некоторыми из моих пользователей, вы когда-нибудь понимали это? Мое приложение не интранет, хотя. И только 20% пользователей получают это, как ни странно.
Кевин

2
Это может быть результатом вашей забавной разметки тега <html> (материал <! - [if lt IE 7]>). Попробуйте удалить его и посмотреть, работает ли он. Смотрите этот ТАК вопрос stackoverflow.com/questions/10682827/…
Sunday Ironfoot

13
@SundayIronfoot FYI, забавная разметка тега <html>, на которую вы ссылаетесь, - это условные комментарии IE, которые используются для добавления класса CSS к элементу <html> для соответствующей версии IE (если применимо), так что вы можете по-разному оформлять вещи по мере необходимости. для версий IE, просто добавив префикс объявления стиля к ".ie7", например: .ie7 p {width: 200px; } ... лучше обходить проблемы рендеринга в старых версиях IE, чем использовать некоторые хаки CSS, такие как * width или _width. Браузеры, кроме IE, будут игнорировать его и использовать только базовый.
Тим Франклин

Ответы:


262

Если вам необходимо переопределить параметры просмотра совместимости IE для сайтов интрасети, вы можете сделать это в файле web.config (IIS7) или через пользовательские заголовки HTTP в свойствах веб-сайта (IIS6) и установить X-UA-Compatible там. Мета-тег не переопределяет настройки интрасети IE в настройках представления совместимости, но если вы установите его на хост-сервере, он переопределит совместимость.

Пример для web.config в IIS7:

<system.webServer>
    <httpProtocol>
      <customHeaders>
        <add name="X-UA-Compatible" value="IE=EmulateIE8" />
      </customHeaders>
    </httpProtocol>
</system.webServer>

Изменить : я удалил clearкод непосредственно перед add; это было ненужное упущение при копировании и вставке. Хороший улов, комментаторы!


5
Только примечание ... Если вы разрабатываете с использованием встроенного веб-сервера разработки Visual Studio (он же Cassini), то это не сработает, потому что Cassini не соблюдает раздел <system.webServer> в Интернете. конфигурации. Поэтому для разработки используйте IIS Express.
Джеймс Мессингер

1
В чем причина <clear />? Какие пользовательские заголовки очищаются этим?
M4N

Похоже, ясность убирает <urlCompression...>правило, по крайней мере, для меня. Это правило делает gzipping, что я хочу, поэтому я закомментировал ясно. Любая дополнительная информация была бы прекрасна.
Ненотлеп

Я удалил 'clear' - хороший улов, это была ненужная строка от копирования и вставки из моей реализации.
Тим Франклин

14
PHP:<?php header('X-UA-Compatible: IE=edge'); ?>
Nux

183

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


X-UA-CompatibleМета - тег должен появиться сразу после заголовка в <head>элементе. Никакие другие метатеги, ссылки css и вызовы js-скриптов не могут быть помещены перед ним.

<head>
    <title>Site Title</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta charset="utf-8">
    <script type="text/javascript" src="/jsFile.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="apple-touch-icon" href="https://stackoverflow.com/apple-touch-icon.png" />
    <link rel="shortcut icon" href="https://stackoverflow.com/apple-touch-icon.png" />
</head>

Если на странице есть какие-либо условные комментарии (скажем, расположены в <html>), они должны быть помещены под, после <head>.

// DON'T: place class inside the HTML tag 
<!--[if gt IE 8]><!--> 
    <html class="aboveIe8"> 
<!--<![endif]-->

// DO: place the class inside the BODY tag
<!--[if gt IE 8]><!--> 
    <body class="aboveIe8"> 
<!--<![endif]-->

Команда Html5BoilerPlate написала об этой ошибке - http://h5bp.com/i/378 У них есть несколько решений.

Что касается представления «Интранет и совместимость», то при настройке инструментов> Параметры представления «Совместимость» имеются настройки.

Настройки просмотра совместимости


1
Я перепробовал 4 или 5 других ответов о переполнении стека, и у меня сработала только эта конкретная комбинация. Для тех, кто использует WordPress и плагин SEO, будьте осторожны с плагином, переписывающим <title> в другом месте. Редактировать: Добавлен комментарий WordPress
Майк Эберт

6
X-UA-Compatibleдолжно появиться как можно раньше, возможно, послеcharset . Я не думаю, что это правда, что это «должно появиться сразу после названия».
Сам

Эта рекомендация является результатом страданий под IE. Был приобретен кровью. Кто говорит, что IE следует руководству?
neoswf

4
Вау, это сработало для меня, и мои метатеги сразу после заголовка - вот что сработало. Жаль, что это не было настолько архаичным, чтобы сделать эту работу ...
The Jerm

X-UA-CompatibleМета - тег может появиться после того, как title, baseи любые другие мета - теги , не теряя при этом свой эффект. Это то, что я тестировал в IE8. Однако, никакие условные комментарии не могут быть помещены перед ним.
Rockallite

37

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

header("X-UA-Compatible: IE=Edge");

4
Это работает лучше, чем добавление метатега, так как он проходит проверку W3C с использованием этого метода и намного проще, чем взлом .htaccess.
Талви Ватиа

2
Я попробовал все остальное, и это было то, что, наконец, сработало. Спасибо.
Джейсон

2
Для тех, кто работает на WordPress, это может помочь: codex.wordpress.org/Plugin_API/Action_Reference/send_headers
ambiguousmouse

Это работает намного лучше, даже когда огромный сайт построен в зависимости от <!--[if lt IE 7 ]> <html>...! СПАСИБО! Вы бог послал!
Оззи

2
@sunskin - Любой заголовок, отправленный PHP, ДОЛЖЕН произойти до отправки какого-либо вывода на страницу, то есть до того, как PHP или данные будут выведены PHP.
TJ L

25

Оказывается, это связано с «умным» выбором Microsoft, который заставляет все сайты интрасети перевести в режим совместимости, даже если X-UA-Compatibleон установлен в IE=edge.


32
Это не правда. X-UA-Compatible переопределит настройку режима совместимости. Однако иногда использование метатега не работает, потому что режим уже был установлен к тому времени, когда он встречается с ним. Вот почему я использую версию заголовка HTML, поэтому браузер может включить стандартный режим на ранней стадии процесса.
Эрик Фанкенбуш

3
Добавив комментарий Mystere Man, вы можете переопределить его с хост-сервера с помощью web.config или пользовательских заголовков http в IIS. Смотрите мой пост выше для деталей.
Тим Франклин

7
Я пробовал это несколько раз, и он не отменяет все сайты интрасети, переведенные в режим сопоставимости.
Месс

@Mystere Man: иногда определяют, как всякий раз, когда страница находится в iframe, где родительский документ не определяет XUA-COMPAT, а режим документа наследуется от родительской страницы (еще один очень разумный выбор MS).
Стефан Штайгер

1
@ Керрик: Это не правильный ответ. См. Нижеприведенный ответ tj111 для правильного ответа.
вырожден

9

Я также получил ту же проблему рендеринга IE9 в стандартах IE7 Document для локального хоста. Я перепробовал много условных комментариев, но безуспешно. В конце я просто удалил все условные теги и сразу же добавил метатег после заголовка, как показано ниже, и это сработало как шарм.

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

Надеюсь, поможет


8

Даже если вы сняли флажок «Показывать сайты интрасети в представлении совместимости» и в заголовках ответов указали X-UA-Compatible, есть еще одна причина, по которой ваш браузер может по умолчанию использовать «Представление совместимости» в любом случае - групповая политика. Посмотрите на вашей консоли следующее сообщение:

HTML1203: xxx.xxx настроен для работы в представлении совместимости через групповую политику.

Где xxx.xxx - это домен вашего сайта (например, test.com). Если вы видите это, то групповая политика для вашего домена устанавливается так, что любой сайт, заканчивающийся на test.com, будет автоматически отображаться в режиме совместимости независимо от типа документа, заголовков и т. Д.

Для получения дополнительной информации, пожалуйста, смотрите следующую ссылку (объясняет HTML-коды): http://msdn.microsoft.com/en-us/library/ie/hh180764(v=vs.85).aspx


5

Как указывает NEOSWF выше, условные комментарии Пола ирландца не дают метатегу иметь никакого влияния.

Здесь есть несколько исправлений ( http://nicolasgallagher.com/better-conditional-classnames-for-hack-free-css/ )

Это включает:

Добавление двух классов HTML, использование заголовков сервера и добавление условного комментария над типом документа.

В моем последнем проекте я решил удалить условные комментарии Пола Ирландского. Мне не понравилась идея добавить что-либо перед html, не выполняя МНОГО тестов в первую очередь, и приятно видеть, что было установлено, просто посмотрев HTML.

В конце я окружил div сразу после тела и использовал условные комментарии, например

  <!--[if IE 7]><div class="ie7"><!--<![endif]-->
  ... regular body stuff
  <!--[if IE 7]></div><!--<![endif]-->

Я мог бы сделать это по всему телу, но это сложнее с CMS, такими как Wordpress.

Очевидно, это еще один DIV внутри разметки, но только для старых браузеров.

Я думаю, что это может быть решение для каждого проекта, хотя.

Я также прочитал кое-что о метатеге charset, который должен быть в первых 1024 байтах, так что это гарантирует.

Иногда самые простые и легкие для чтения идеи являются лучшими, и об этом определенно стоит подумать! Спасибо за 6-й комментарий по ссылке выше за указание на это.


5

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


5

Я добавил следующее в мой файл htaccess, что и помогло:

BrowserMatch MSIE ie
Header set X-UA-Compatible "IE=Edge,chrome=1" env=ie

1
это работает, когда интрасеть настроена на совместимость. Мне потребовалось много времени, чтобы найти то, что будет работать. особенно когда вы ищете и все связано с iis
shorif2000

Это круто. Я не знал, что вы можете отправить заголовки с .htaccess
Alex W

3

Кроме того, X-UA-Compatible должен быть первым метатегом в разделе head

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

Кстати, правильный порядок или основные метки заголовков таковы:

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta charset="utf-8">
    <title>Site Title</title>
    <!-- other tags -->
</head>

Сюда

  1. мы устанавливаем механизм рендеринга для использования до начала обработки IExplorer
  2. документ затем мы устанавливаем кодировку для использования для всех браузеров
  3. затем мы печатаем заголовок, который будет обработан с уже определенной кодировкой.

2
На самом деле CHARSET должен предшествовать X-UA-Compatible. См. Blogs.msdn.com/b/ieinternals/archive/2011/07/18/…
EricLaw

1
Это не должно быть первым, но это должно быть около вершины. Он может следовать за названием (и charset, как заметил Эрик), но это все.
Ланс Леонард

в моем случае на nginx он будет работать только в том случае, если тег X-UA-Compatible является первым в разделе
Марко Рот,

2

Тимми Фрэнкс был прав для меня. Сегодня у нас была проблема, когда у клиента был IE8 по всей компании, и он переводил сайт, который мы написали для своей интрасети, в режим совместимости. Настройка «IE-Edge», кажется, это исправить.

<httpProtocol>
  <customHeaders>
    <clear />
    <add name="X-UA-Compatible" value="IE=Edge" />
  </customHeaders>
</httpProtocol>


1

IE 11 больше не позволяет вам переопределять настройки представления совместимости браузера, отправляя заголовок ...

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

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

Мы смогли предотвратить необходимость изменения пользователем настроек браузера для пользователей IE 9 и 10, но он больше не работает в IE 11. Наши пользователи IE переключаются на Chrome, где это не проблема, и никогда не было было.


Дело не в том, что это не позволяет, IE11не поддерживает другие режимы совместимости, кроме edge. Ссылка на официальную документацию . Это означает, что нам больше не нужно использовать этот метатег, чтобы скрыть кнопку CM в адресной строке.
Уоллес Сидре

4
Неверно: IE11 по-прежнему поддерживает все устаревшие режимы совместимости.
EricLaw

@EricLaw, правильный ответ EricP (что IE11 меняет поведение для HTTP-заголовка, совместимого с X-UA)?
Мэтью Флэшен

@EricP, вы пробовали HTTP-заголовок или только версию тега <meta>?
Мэтью Флэшен

2
@MatthewFlaschen: Нет, EricP неверен, как и Уоллес Сидри (хотя, если быть честным, Уоллес, MSDN не объясняет, что они подразумевают под "устаревшим"). Что изменилось в IE11, так это отсутствие видимой кнопки «Просмотр совместимости» ( technet.microsoft.com/en-us/library/dn321449.aspx ), но декларации X-UA-Compatible по-прежнему соблюдаются.
EricLaw

1

Мне удалось обойти эту загрузку заголовков до HTML с помощью php, и это сработало очень хорошо.

<?php 
header( 'X-UA-Compatible: IE=edge,chrome=1' );
header( 'content: width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' );
include('ix.html');
?> 

ix.html - это контент, который я хотел загрузить после отправки заголовков.


1

Я испытывал ту же проблему в IE11. Ни один из этих ответов не решил мою проблему. Немного покопавшись, я заметил, что браузер работает в режиме Enterprise . (подтвердите, нажав F12 и перейдите на вкладку эмуляции, найдите выпадающий профиль браузера). Параметр заблокирован, и я не могу его изменить.

Мне удалось изменить профиль на рабочий стол после удаления CurrentVersion из следующего раздела реестра:

HKEY_CURRENT_USER\Software\Policies\Microsoft\Internet Explorer\Main\EnterpriseMode

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


1

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

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

ОТКЛЮЧИТЬ РЕЖИМ СОВМЕСТИМОСТИ ДЛЯ ИНТРАНЕТА

HKEY_LOCAL_MACHINE - ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ - Политики - Microsoft - Internet Explorer - BrowserEmulation -> IntranetCompalityMode Значение должно быть 0 (ноль) . А также удалить существующее доменное имя из PolicyList.

В противном случае вы можете добавить новое значение (DWORD), которое содержит 0 (ноль) данных значения.


0

У меня была та же проблема после попытки много комбинации у меня было это рабочее примечание у меня проверена совместимость для интрасети

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<head runat="server">

0

Если вы используете стек LAMP, добавьте его в файл .htaccess в корневой веб-папке. Нет необходимости добавлять его в каждый файл PHP.

<IfModule mod_headers.c>
    Header add X-UA-Compatible "IE=Edge"
</IfModule>
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.