协慌网

登录 贡献 社区

<meta http-equiv =“X-UA-Compatible”content =“IE = edge”> 是做什么用的?

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

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

答案

2015 年 10 月更新

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

根据您支持的 Microsoft 浏览器,您可能不需要继续使用X-UA-Compatible标记。如果您需要支持 IE9 或 IE8,那么我建议使用该标签。如果您只支持最新的浏览器(IE11 和 / 或 Edge),那么我会考虑完全删除此标签。如果您使用 Twitter Bootstrap 并且需要消除验证警告,则此标记必须以其指定的顺序出现。其他信息如下:


X-UA-Compatible元标记允许 Web 作者选择应该呈现页面的 Internet Explorer 版本。 IE11 对这些模式进行了更改; 请参阅下面的 IE11 注释。取代 IE11 的浏览器Microsoft Edge在某些情况下仅尊重X-UA-Compatible元标记。请参阅下面的 Microsoft Edge 注释。

根据 Microsoft 的说法,当使用X-UA-Compatible标签时,它应该在文档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 模式不同,Emulate IE9 模式遵循该指令。

  • 模拟 IE8 模式告诉 Internet Explorer 使用该指令来确定如何呈现内容。标准模式指令以 IE8 模式显示,而怪异模式指令以 IE5 模式显示。与 IE8 模式不同,Emulate IE8 模式遵循该指令。

  • 模拟 IE7 模式告诉 Internet Explorer 使用该指令来确定如何呈现内容。标准模式指令以 Internet Explorer 7 标准模式显示,而 quirks 模式指令以 IE5 模式显示。与 IE7 模式不同,Emulate 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 vs IE8 或 9. 我总是喜欢最新版本的 IE。

IE11

来自微软

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

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

<!doctype html>

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

从 IE11 开始,不推荐使用文档模式,不应再使用它们,临时情况除外。确保更新依赖于旧版功能和文档模式的站点以反映现代标准。

如果您必须定位特定文档模式,以便在您重新设计网站时支持现代标准和功能,请注意您正在使用过渡功能,该功能可能在将来的版本中不可用。

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

Microsoft Edge (Windows 10 附带的 Internet Explorer 替换)

有关 IE 的 “Edge” 版本的X-UA-Compatible元标记的信息。 来自微软

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

正如我们在 2013 年 8 月宣布的那样,我们正在弃用 IE11 中的文档模式。通过我们最新的平台更新,对遗留文档模式的需求主要限于企业遗留 Web 应用程序。随着新的体系结构更改,这些遗留文档模式将与 “生活” 边缘模式中的更改隔离开来,这将有助于为依赖这些模式的客户提供更高级别的兼容性,并帮助我们更快地在 Edge 中进行更改。 IE 仍将遵循 Intranet 站点,兼容性视图列表中的站点以及仅与企业模式一起使用时所服务的文档模式。

公共 Internet 站点将使用新的 Edge 模式平台进行渲染(忽略 X-UA-Compatible)。我们的目标是 Edge 从现在开始是 “活的” 文档模式,未来不会再引入文档模式。

由于 Microsoft Edge 中的更改在大多数情况下不再支持文档模式,因此 Microsoft 有一个工具来扫描您的站点以检查它是否具有与 Edge 不兼容的代码。

Chrome = 1 Info 的 IE

还有chrome=1 ,您可以使用或与上述选项之一一起使用,例如: <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">chrome=1适用于 Google 的 Chrome Frame,其定义为:

Google Chrome Frame 是一个开源浏览器插件。安装了插件的用户可以在浏览器中打开页面时访问 Google Chrome 的开放式 Web 技术和快速 JavaScript 引擎。

Google Chrome Frame 可无缝增强您在 Internet Explorer 中的浏览体验。它使用 Google Chrome 的渲染技术显示支持 Google Chrome Frame 的网站,让您可以访问最新的 HTML5 功能以及 Google Chrome 的性能和安全功能,而不会以任何方式中断您常用的浏览器使用情况。

安装 Google Chrome 浏览器内嵌框架后,无需考虑即可让网络变得更好。

但是要使该插件工作,必须在X-UA-Compatible元标记中使用chrome=1

有关 Chrome Frame 的更多信息,请点击此处

注意: Google Chrome 浏览器内嵌框架仅适用于IE6 到 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 的答案bitinn 的答案

XHTML

只要标签正确关闭(即/> vs > ),使用<meta http-equiv="X-UA-Compatible" content="IE=Edge" />时验证就没有问题。

Twitter Bootstrap

这个标签已经被强烈地引导团队至少自 2014 推荐,并Bootlint ,由团队拼焊板撰写的棉短绒继续抛出一个警告省略标记时。 linter 区分警告和错误,因此省略此标记的严重性可能被认为是次要的。


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

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

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

使用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">

或者更好地配置 Web 服务器:
(另见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>
  • Stef Pause提出的Nginx

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

    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>

Microsoft 建议使用 IE11 以来的Edge 模式

正如Lynda所注意到的(请参阅注释), IE11 中兼容性更改建议使用Edge 模式

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

但微软的立场并不清楚。另一个MSDN 页面不建议使用Edge 模式

由于边缘模式强制在标准模式下打开所有页面,因此无论 Internet Explorer 的版本如何,您都可能会对使用 Internet Explorer 查看的所有页面使用此页面。请勿这样做,因为仅从 Windows Internet Explorer 8 开始支持X-UA-Compatible标头。

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

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

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

Clara Onager甚至在旧版本的Specifying 遗留文档模式中注意到:

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

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被认为是事实上的标准( 2003 年2004 年,2005 年和 2006年仅 IE6 的市场份额为 80%至 97%,所有 IE 版本的市场份额更多)。

由于 IE6 不符合 Web 标准 ,开发人员必须使用 IE6 测试他们的网站。对于微软(MS)而言,这种情况非常好,因为网络开发人员不得不购买 MS 产品(例如,IE 不能在不购买 Windows 的情况下使用),并且保持不合规更加盈利(即微软希望成为排除其他产品标准)公司)。

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

然而,在这个时候,Mozilla 开始尽可能地尊重所有 Web 标准的 Firefox 开发(实现其他浏览器以呈现由 IE6 完成的页面)。随着越来越多的 Web 开发人员想要使用新的 Web 标准功能,越来越多的网站受到 Firefox 的支持而不是 IE。

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


网络不兼容的问题

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

IE6 仍在 2016 年使用

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

中国占 2013 年 IE6 使用量的 50%,但随着中国 Linux 发行版的播出 ,它可能会在未来几年内发生变化。

对您的网络技能充满信心

如果您(尝试)尊重 Web 标准,您可以简单地始终使用http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" 。要保持与旧浏览器的兼容性,请避免使用最新的 Web 功能:使用您要支持的最旧浏览器支持的子集。或者如果你想更进一步,你可以采用优雅降级渐进增强不引人注目的 JavaScript 等概念 。 (您可能也很高兴阅读Web 开发人员应该考虑什么? 。)

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

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

个人 IE6 体验

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

这很难,但是当公司改用 IE8 时,该网站仍然很好地呈现,因为我使用了 Firefox 和firebug来检查网络标准的兼容性;)

不同之处在于,如果仅指定DOCTYPE ,则 IE 的兼容性视图设置优先。默认情况下,无论DOCTYPE如何,这些设置都会强制所有 Intranet 站点进入兼容性视图。还有一个复选框,可以为所有网站使用兼容性视图,无论DOCTYPE如何。

IE兼容性视图设置对话框

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

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

DOCTYPE不能这样做; 在这些情况下,无论DOCTYPE如何,您都将处于兼容性视图模式之一。

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

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