internet-explorer ie兼容meta - <meta http-equiv=“X-UA-Compatible”content=“IE=edge”>是做什么的?




chrome (11)

2015年10月更新

这个答案是几年前发布的,现在的问题真的应该是你应该考虑在你的网站上使用X-UA-Compatible标签吗? 随着微软对其浏览器的改变(更多关于下文)。

根据您支持的Microsoft浏览器的不同,您可能不需要继续使用X-UA-Compatible标签。 如果您需要支持IE 9或IE 8,那么我会推荐使用该标签。 如果你只支持最新的浏览器(IE 11和/或Edge),那么我会考虑完全放弃这个标签。 如果您使用Twitter Bootstrap并且需要消除验证警告,则此标记必须以其指定的顺序出现。 以下附加信息:

X-UA兼容元标记允许网络作者选择将该页面呈现为什么版本的Internet Explorer。 IE11已对这些模式进行了更改; 请参阅下面的IE11说明。 在IE11之后发布的浏览器Microsoft Edge只会在某些情况下兑现X-UA兼容元标记。 请参阅下面的Microsoft Edge注释。

根据微软的说法,当使用X-UA兼容标签时,它应该尽可能地高于文档head

如果您使用X-UA兼容的META标签,则希望尽可能靠近页面顶部的顶部。 Internet Explorer将使用最新版本开始解释标记。 当Internet Explorer遇到与X-UA兼容的META标记时,它将使用指定版本的引擎重新开始。 这是性能问题,因为浏览器必须停止并重新开始分析内容。

这里是你的选择:

  • “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支持更高的兼容模式,则设置为边缘模式的页面将以该版本支持的最高模式显示。 使用Internet Explorer 9查看时,这些相同的页面仍将以IE9模式显示。Internet Explorer支持许多文档兼容模式,这些模式可启用不同的功能并可能影响内容的显示方式:

  • IE11模式为现有和新兴行业标准提供了最高的支持,包括HTML5,CSS3等。

  • IE10模式为建立和新兴行业标准提供了最高的支持,包括HTML5,CSS3等。

  • IE9模式为建立和新兴行业标准提供了最高的支持,包括HTML5(工作草案),W3C级联样式表级别3规范(工作草案),可伸缩矢量图形(SVG)1.0规范等。 [编者注:IE 9 支持CSS3动画]。

  • IE8模式支持许多既定标准,包括W3C层叠样式表级别2.1规范和W3C选择器API; 它也为W3C级联样式表3级规范(工作草案)和其他新兴标准提供了有限的支持。

  • 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中显示的方式非常相似。

IE 10注意:从Internet Explorer 10开始,怪异模式的行为与早期版本浏览器的行为不同。 在Windows Internet Explorer 9及更早版本中,特雷莫模式将网页限制为Microsoft Internet Explorer 5.5支持的功能。 在Internet Explorer 10中,怪异模式符合HTML5规范中指定的差异。

就个人而言,我总是选择http-equiv="X-UA-Compatible" content="IE=edge"元标记,因为旧版本有很多错误,我不希望IE决定进入“兼容模式”并显示我的网站为IE7与IE8或9.我总是喜欢最新版本的IE浏览器。

IE 11

From微软:

从IE11开始,边缘模式是首选的文档模式; 它代表了对浏览器可用的现代标准的最高支持。

使用HTML5文档类型声明来启用边缘模式:

<!doctype html>

边缘模式在Internet Explorer 8中引入,并且已在每个后续版本中提供。 请注意,边缘模式支持的功能仅限于浏览器呈现内容的特定版本所支持的功能。

从IE11开始,文档模式已被弃用,不应再使用,除非是临时性的。 确保更新依赖于旧功能和文档模式的网站以反映现代标准。

如果您必须以特定的文档模式为目标,以便您的网站在重新制作以支持现代标准和功能时正常工作,请注意您使用的是过渡功能,而未来版本中可能无法使用该过渡功能。

如果您当前使用x-ua兼容标头来定位传统文档模式,则您的网站可能无法反映IE11提供的最佳体验。

Microsoft Edge (替换Windows 10捆绑的Internet Explorer)

有关IE的“边缘”版本的X-UA兼容元标记的信息。 来自微软

介绍“生活”边缘文档模式

正如我们在2013年8月宣布的那样,我们从IE11开始就弃用文档模式。 通过我们最新的平台更新,对传统文档模式的需求主要限于企业传统网络应用程序。 随着新的体系结构变化,这些传统文档模式将与“生活”边缘模式中的变化隔离开来,这将有助于保证依赖这些模式的客户获得更高级别的兼容性,并帮助我们更快地改进Edge 。 IE的下一个主要版本仍将遵守Intranet站点提供的文档模式,兼容性视图列表中的站点以及仅用于企业模式的文档模式。

公共互联网网站将使用新的Edge模式平台呈现(忽略X-UA兼容)。 我们的目标是从此以后,Edge就是“生存”的文档模式,并且不会再推出进一步的文档模式。

随着Microsoft Edge中的更改在大多数情况下不再支持文档模式,Microsoft有一个工具可以扫描您的网站以检查它是否包含与Edge不兼容的代码。

对于IE浏览器,Chrome = 1 Info

也可以使用chrome=1 ,或者将其与以上某个选项一起使用,EX: <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的呈现技术显示支持Google Chrome Frame的网站,让您可以访问最新的HTML5功能以及Google Chrome的性能和安全功能,而无需中断通常的浏览器使用。

当谷歌浏览器框架安装后,网络会变得更好,无需考虑。

但是为了使该插件正常工作,您必须在X-UA兼容元标记中使用chrome=1

Chrome Frame的更多信息可以在这里找到

注意:谷歌Chrome浏览器框架仅适用于IE9至IE9 ,并于2014年2月25日停用。 有关详细信息,请点击此处 。 谢谢@mck的链接。

验证:

HTML5

仅当使用<meta http-equiv="X-UA-Compatible" content="IE=Edge">时,页面才会使用W3验证器进行验证 。 对于其他值,它将引发错误: 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标头在服务器级别执行此操作。 作为一个说明,微软表示, 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). 有关如何设置HTTP标头的更多详细信息,请参阅olibre的answer或bitinn的answer 。

XHTML

只要标签正确关闭,IE: /> vs >使用<meta http-equiv="X-UA-Compatible" content="IE=Edge" />时不存在验证问题。

Twitter Bootstrap

至少从2014年起Bootstrap团队强烈推荐此标签,而由twbs团队(https://github.com/twbs/bootlint)撰写的Linter的Bootlint继续在省略标签时warning 。 棉绒区分警告和错误,因此忽略该标签的严重性可能被认为较小。

有关X-UA兼容的更多信息,请参阅Microsoft的网站定义文档兼容性

有关IE支持的更多信息,请参阅网站caniuse.com

有关Twitter Bootstrap要求的更多信息,请参阅bootlint项目wiki页面

如果一个网页开始,有什么区别

<!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版本中以大多数标准模式呈现。


2.1.3.5 X-UA兼容性元标记和HTTP响应头

此功能不会在任何版本的Microsoft Edge中实施。

<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE" />

请参阅https://msdn.microsoft.com/en-us/library/ff955275(v=vs.85).aspx

是的,我知道我迟到了,但我只是有一些问题和讨论,最后我的老板让我X-UA-Compatible从我一直在处理的所有文件中删除标签删除。

如果这些信息过时或不再相关,请纠正我。


如果您在与服务器IE相同的网络中使用您的网站,则尽管DOCTYPE,IE仍然喜欢切换到可编辑性模式
添加meta http-equiv="X-UA-Compatible" content="IE=Edge" 会禁用这种不需要的行为。


区别在于,如果您只指定DOCTYPE ,则IE的兼容性视图设置优先。 默认情况下,无论DOCTYPE如何,这些设置都将强制所有Intranet站点进入兼容性视图。 还有一个复选框可用于所有网站的兼容性视图,无论DOCTYPE如何。

X-UA-Compatible覆盖兼容性视图设置,因此无论浏览器设置如何,页面都将在标准模式下呈现。 这迫使标准模式:

  • 内联网页面
  • 当计算机管理员选择“在兼容性视图中显示所有网站”作为默认值时,外部网页认为是大公司,政府,大学
  • 当您无意中最终在Microsoft兼容性视图列表上
  • 用户手动将网站添加到兼容性视图设置中的列表中的情况

DOCTYPE本身不能做到这一点; 无论DOCTYPE如何,您都将在这些情况下以兼容性视图模式之一结束。

如果指定了meta标记和HTTP标头,则优先使用meta标记。

这个答案基于检查在IE8IE9IE10决定文档模式的完整规则。 请注意,查看DOCTYPE是决定文档模式的最后一个后备。


使用content= "IE=edge,chrome=1"跳过其他X-UA-Compatible模式

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
                                   -------------------------- 
  • 没有兼容性图标
    IE9地址栏不显示兼容性视图按钮
    并且该页面也不会显示杂乱的菜单,图像和文本框。

  • 特征
    这个元标记需要在IE8上启用javascript::JSON.parse()
    (即使存在<!DOCTYPE html>

  • 正确性
    现代HTML / CSS / JavaScript的渲染/执行更有效(更好)。

  • 性能
    Trident渲染引擎在其边缘模式下应该运行得更快。

用法

在你的HTML中

<!DOCTYPE html> 
<html> 
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  • IE=edge意味着IE应该使用其渲染引擎的最新(边缘)版本
  • chrome=1意味着IE应该使用Chrome渲染引擎(如果已安装)

或者在你的网络服务器的配置中更好:
(另请参阅RiaD的答案 )

  • 由pixeline提议的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>
    
  • NginxStef Pause提出

    server {
      #...
      add_header X-UA-Compatible "IE=Edge,chrome=1";
    }
    
  • Lucas Riutzel提议的Varnish代理

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

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

微软自IE11以来推荐Edge模式

正如Lynda所注意到的(请参阅评论), IE11兼容性更改建议使用边缘模式

从IE11开始,边缘模式是首选的文档模式; 它代表了对浏览器可用的现代标准的最高支持。

但微软的立场并不明朗。 另一个MSDN页面不推荐使用边缘模式

由于边缘模式会强制所有页面以标准模式打开,而不管Internet Explorer的版本如何,因此可能会试图将其用于通过Internet Explorer查看的所有页面。 不要这样做,因为只有从Windows Internet Explorer 8开始支持X-UA-Compatible标头。

相反,微软建议使用<!DOCTYPE html>

如果您希望所有支持的Internet Explorer版本以标准模式打开您的页面,请使用HTML5文档类型声明[...]

正如Ricardo解释的(在下面的评论中),任何DOCTYPE(HTML4,XHTML1 ...)都可以用来触发标准模式,而不仅仅是HTML5的DOCTYPE。 重要的是在页面中始终有一个DOCTYPE。

Clara Onager甚至在指定旧版文档模式的旧版本中已经注意到:

边缘模式仅用于测试目的; 不要在生产环境中使用它。

Usman Y认为Clara Onager在谈论:

该示例仅用于说明目的; 不要在生产环境中使用它。

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

那么......在这个答案的其余部分,我给出了更多的解释,为什么使用content="IE=edge,chrome=1"是一个很好的生产实践。

历史

多年来(2000年至2008年), IE市场份额超过80% 。 而IE v6被认为是事实上的标准( 20032004年,2005年和2006年只有IE6的市场份额为80%至97%,所有IE版本的市场份额更大)。

由于IE6不尊重Web标准 ,开发人员必须使用IE6测试他们的网站。 由于网络开发者必须购买 MS产品(例如IE不能在没有购买Windows的情况下使用IE),所以这种情况对于微软(MS)来说是非常好的,并且为了保持不合规格而获利更多(即微软希望成为不包括其他产品标准)公司)。

因此许多网站只符合IE6标准,而且由于IE不符合网络标准,所有这些网站在符合标准的浏览器上都不能很好地呈现。 更糟糕的是, 许多网站只需要IE浏览器

然而,目前,Mozilla开始尽可能尊重所有的Web标准(其他浏览器都是通过IE6完成的)。 随着越来越多的Web开发人员想要使用新的Web标准功能,越来越多的网站比Firefox更受Firefox的支持。

当IE市场份额下降时,MS意识到不符合标准并不是一个好主意。 因此MS开始发布新的IE版本(IE8 / IE9 / IE10)。

网络不兼容的问题

但问题是所有为IE6设计的网站:微软无法发布新的IE版本与这些旧的IE6设计的网站不兼容。 MS并没有推出IE版本,而是要求开发者在他们的页面中添加额外的数据( X-UA-Compatible )。

IE6仍在2016年使用

如今,IE6仍在使用(2016年为0.7%) (2014年1月为4.5%),一些互联网网站仍然只符合IE6标准。 一些Intranet网站/应用程序使用IE6进行测试。 某些Intranet网站只能在IE6上运行。 这些公司/部门更愿意推迟迁移成本:其他优先事项,没有人知道网站/应用程序是如何实施的,遗留网站/应用程序的所有者已经破产......

2013年,中国占IE6使用量的50%,但随着中国Linux发行量的增加 ,未来几年可能会发生变化。

对自己的网络技能充满信心

如果你(试图)尊重网页标准,你可以简单地使用http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" 。 为了保持与旧浏览器的兼容性,请避免使用最新的网页功能:使用您想要支持的最旧浏览器支持的子集。 或者如果你想进一步,你可能会采用像优雅退化渐进式增强Unobtrusive JavaScript这样的概念 。 (您可能也很乐意阅读Web开发人员应该考虑什么?

不要关心最好的IE版本渲染:这不是你的工作,因为浏览器必须符合Web标准。 如果您的网站符合标准并使用适度的最新功能,那么浏览器必须符合您的网站

而且,由于有很多杀死 IE6的活动( 不再是IE6MS活动 ),现在您可以避免浪费时间进行IE测试!

个人IE6体验

在2009-2012年,我曾为一家使用IE6的公司工作,因为它允许使用官方的单一浏览器 。 我不得不为IE6实施一个Intranet网站。 我决定尊重web标准,但使用支持IE6的子集(HTML / CSS / JS)。

这很难,但是当公司切换到IE8时,该网站仍然渲染得很好,因为我使用Firefox和firebug来检查网络标准的兼容性;)


我认为这个来自微软的图解释了所有。 为了告诉IE如何呈现内容,!DOCTYPE必须使用X-UA兼容元标记。 !DOCTYPE本身对更改IE文档模式没有影响。

IE8


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

要使该行按预期工作,请确保:

  1. 它是<head>之后的第一个元素
  2. 元标记之前没有使用条件注释 ,例如在<html>元素上

否则一些IE版本会忽略它。

UPDATE

这两条规则简化了,但它们易于记忆和验证。 尽管MSDN文档声明您可以在此之前放置标题和其他元标记,但我不建议这样做。

如何使它与条件注释一起工作。

关于头部元素顺序的有趣文章。 (blogs.msdn.com,用于IE)

参考

MSDN文档

X-UA-Compatible [...]必须出现在除了标题元素和其他元素之外的所有其他元素之前的网页头部(HEAD部分)。


由于我无法对标记的答案添加评论,因此我只会在此处发布此评论。

除了正确的答案,你确实可以有这个验证。 由于这个元标记只针对IE,所以你需要做的就是添加一个IE条件。

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

这样做就像添加其他IE条件语句一样,只适用于IE,其他浏览器不会受到影响。


使用它可以强制IE在地址栏中隐藏烦人的浏览器兼容性按钮:

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

为了完整起见,您实际上不必将其添加到您的HTML中(HTML5中未知的http-equiv)

做到这一点,永远不要回头(第一个例子是apache ,第二个是nginx

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

add_header X-UA-Compatible "IE=Edge,chrome=1";





internet-explorer browser x-ua-compatible