<meta http-equiv=“X-UA-Compatible"是什么意思?内容=“IE=边缘"&gt;做?

2022-01-30 00:00:00 internet-explorer browser html x-ua-compatible

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

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

如果页面以

开头

<!DOCTYPE html><html><头><!-- 没有 X-UA-Compatible meta -->

如果没有区别，我想我可以忽略 X-UA-Compatible 元标头，因为我只希望它在所有 IE 版本中以大多数标准模式呈现.

解决方案

2021 年 11 月更新

由于这个答案现在已有 10 多年的历史，我的建议是完全不使用这个标签，除非您必须支持旧的旧版浏览器.

2015 年 10 月更新

这个答案是几年前发布的，现在问题应该是你是否应该考虑在你的网站上使用 X-UA-Compatible 标签?微软已经对其浏览器进行了改进(更多内容见下文).

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

X-UA-Compatible 元标记允许 Web 作者选择应将页面呈现为哪个 Internet Explorer 版本.IE11 对这些模式进行了更改；请参阅下面的 IE11 注释.Microsoft Edge，取代 IE11 的浏览器，只支持 X-在某些情况下，UA 兼容 元标记.请参阅下面的 Microsoft Edge 说明.

按照微软的说法，当使用X-UA-Compatible标签时，应该在你的文档中尽可能高的head:

<块引用>

如果您使用 X-UA-Compatible META 标签，您希望将其放置在尽可能靠近页面 HEAD 顶部的位置.Internet Explorer 开始使用最新版本解释标记.当 Internet Explorer 遇到 X-UA-Compatible META 标签时，它会使用指定版本的引擎重新开始.这会影响性能，因为浏览器必须停止并重新开始分析内容.

以下是您的选择:

  • IE=edge"
  • 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 Cascading Style Sheets Level 2.1 Specification 和 W3C Selectors API；它还为 W3C 级联样式表第 3 级规范(工作草案)和其他新兴标准提供有限的支持.

<块引用>

  • IE7 模式呈现内容，就像它在 Internet Explorer 7 中以标准模式显示一样，无论页面是否包含 ;指令.

<块引用>

  • 模拟 IE9 模式告诉 Internet Explorer 使用 <!DOCTYPE>指令来确定如何呈现内容.标准模式指令以 IE9 模式显示，怪癖模式指令以 IE5 模式显示.与 IE9 模式不同，Emulate IE9 模式尊重 <!DOCTYPE>指令.

<块引用>

  • 模拟 IE8 模式告诉 Internet Explorer 使用 <!DOCTYPE>指令来确定如何呈现内容.标准模式指令以 IE8 模式显示，怪癖模式指令以 IE5 模式显示.与 IE8 模式不同，Emulate IE8 模式尊重 <!DOCTYPE>指令.

<块引用>

  • Emulate IE7 模式告诉 Internet Explorer 使用 <!DOCTYPE>指令来确定如何呈现内容.标准模式指令以 Internet Explorer 7 标准模式显示，怪癖模式指令以 IE5 模式显示.与 IE7 模式不同，Emulate IE7 模式尊重 <!DOCTYPE>指示.对于许多网站来说，这是首选的兼容模式.

<块引用>

  • IE5 模式呈现内容，就好像它是 Internet Explorer 7 以 quirks 模式显示的一样，这与 Microsoft Internet Explorer 5 中的内容显示方式非常相似.

IE10 注意: 从 IE10 开始，怪癖模式的行为与早期版本的浏览器不同.在 IE9 及更早的版本中，quirks 模式将网页限制为 IE5.5 支持的功能.在 IE10 中，quirks 模式符合 HTML5 规范中规定的差异.

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

IE11

来自 微软:

<块引用>

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

<块引用>

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

<块引用>

<!doctype html>

<块引用>

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

<块引用>

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

<块引用>

如果您必须以特定文档模式为目标，以便您的网站在您对其进行改造以支持现代标准和功能时正常运行，请注意您正在使用一种过渡性功能，该功能可能在未来的版本中不可用.

<块引用>

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

Microsoft Edge(替代 Internet Explorer与 Windows 10 捆绑在一起)

关于Edge"的 X-UA-Compatible 元标记的信息IE版本.来自微软:

<块引用>

引入动态"Edge 文档模式

<块引用>

正如我们在 2013 年 8 月宣布的那样，我们从 IE11 开始弃用文档模式.随着我们最新的平台更新，对旧文档模式的需求主要限于企业旧 Web 应用程序.随着新的架构更改，这些旧文档模式将与实时"Edge 模式的更改隔离，这将有助于为依赖这些模式的客户保证更高级别的兼容性，并帮助我们更快地改进 Edge.IE 仍将支持 Intranet 站点、兼容性视图列表中的站点以及仅与企业模式一起使用时提供的文档模式.

<块引用>

公共 Internet 站点将使用新的 Edge 模式平台呈现(忽略 X-UA 兼容).Edge 是活的"是我们的目标.文档模式从这里开始，以后不会引入更多的文档模式.

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

适用于 IE 的 Chrome=1 信息

还有 chrome=1 您可以使用或与上述选项之一一起使用，例如:<meta http-equiv="X-UA-Compatible"内容=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 的性能和安全功能，而不会以任何方式中断您通常的浏览器使用.

<块引用>

安装 Google Chrome Frame 后，网络会变得更好，而无需您考虑.

但要使该插件正常工作，您必须在 X-UA-Compatible 元标记中使用 chrome=1.

更多关于 Chrome Frame 的信息可以在 这里.

注意: Google Chrome Frame 仅适用于 IE6 到 IE9，并于 2014 年 2 月 25 日停用.更多信息可以在 这里.感谢@mck 提供链接.

验证:

HTML5:

只有在使用 <meta http-equiv= 时，页面才会使用 W3 Validator 进行验证兼容 X-UA"内容=IE=Edge">.对于其他值，它将引发错误:具有值为 X-UA-Compatible 的 http-equiv 属性的元元素必须具有值为 IE=edge 的内容属性. 换句话说，如果你有 IE=edge,chrome=1 它不会验证.我完全忽略了这个错误，因为现代浏览器只是忽略了这行代码.

如果您必须拥有完全有效的代码，请考虑通过设置 HTTP 标头在服务器级别执行此操作.作为注释，微软表示，如果发送这两个指令(元和 HTTP)，则开发人员的偏好(元元素)优先于 Web 服务器设置(HTTP 标头). 请参阅 olibre 的回答 或 bitinn 的回答有关如何设置 HTTP 标头的更多详细信息.

XHTML

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

Twitter Bootstrap(V3 及以下)

至少从 2014 年开始，Bootstrap 团队就强烈推荐此标签，并且 Bootlint，linter当标签被省略时，由 twbs 团队创作的继续抛出 警告.linter 区分警告和错误，因此忽略此标记的严重性可能被认为是次要的.

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

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

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

What's the difference if one web page starts with

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

and If page starts with

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

If there is no difference, I suppose I can just ignore the X-UA-Compatible meta header, since I just want it to be rendered in most standard mode in all IE versions.

解决方案

November 2021 Update

As this answer is now 10+ years old my recommendation would be to leave this tag out altogether, unless you must support old legacy browsers.

October 2015 Update

This answer was posted several years ago and now the question really should be should you even consider using the X-UA-Compatible tag on your site? with the changes Microsoft has made to its browsers (more on those below).

Depending upon what Microsoft browsers you support you may not need to continue using the X-UA-Compatible tag. If you need to support IE9 or IE8, then I would recommend using the tag. If you only support the latest browsers (IE11 and/or Edge) then I would consider dropping this tag altogether. If you use Twitter Bootstrap and need to eliminate validation warnings, this tag must appear in its specified order. Additional info below:

The X-UA-Compatible meta tag allows web authors to choose what version of Internet Explorer the page should be rendered as. IE11 has made changes to these modes; see the IE11 note below. Microsoft Edge, the browser that replaced IE11, only honors the X-UA-Compatible meta tag in certain circumstances. See the Microsoft Edge note below.

According to Microsoft, when using the X-UA-Compatible tag, it should be as high as possible in your document head:

If you are using the X-UA-Compatible META tag you want to place it as close to the top of the page's HEAD as possible. Internet Explorer begins interpreting markup using the latest version. When Internet Explorer encounters the X-UA-Compatible META tag it starts over using the designated version's engine. This is a performance hit because the browser must stop and restart analyzing the content.

Here are your options:

  • "IE=edge"
  • "IE=11"
  • "IE=EmulateIE11"
  • "IE=10"
  • "IE=EmulateIE10"
  • "IE=9"
  • "IE=EmulateIE9
  • "IE=8"
  • "IE=EmulateIE8"
  • "IE=7"
  • "IE=EmulateIE7"
  • "IE=5"

To attempt to understand what each means, here are definitions provided by Microsoft:

Internet Explorer supports a number of document compatibility modes that enable different features and can affect the way content is displayed:

  • Edge mode tells Internet Explorer to display content in the highest mode available. With Internet Explorer 9, this is equivalent to IE9 mode. If a future release of Internet Explorer supported a higher compatibility mode, pages set to edge mode would appear in the highest mode supported by that version. Those same pages would still appear in IE9 mode when viewed with Internet Explorer 9. Internet Explorer supports a number of document compatibility modes that enable different features and can affect the way content is displayed:

  • IE11 mode provides the highest support available for established and emerging industry standards, including the HTML5, CSS3 and others.

  • IE10 mode provides the highest support available for established and emerging industry standards, including the HTML5, CSS3 and others.

  • IE9 mode provides the highest support available for established and emerging industry standards, including the HTML5 (Working Draft), W3C Cascading Style Sheets Level 3 Specification (Working Draft), Scalable Vector Graphics (SVG) 1.0 Specification, and others. [Editor Note: IE 9 does not support CSS3 animations].

  • IE8 mode supports many established standards, including the W3C Cascading Style Sheets Level 2.1 Specification and the W3C Selectors API; it also provides limited support for the W3C Cascading Style Sheets Level 3 Specification (Working Draft) and other emerging standards.

  • IE7 mode renders content as if it were displayed in standards mode by Internet Explorer 7, whether or not the page contains a <!DOCTYPE> directive.

  • Emulate IE9 mode tells Internet Explorer to use the <!DOCTYPE> directive to determine how to render content. Standards mode directives are displayed in IE9 mode and quirks mode directives are displayed in IE5 mode. Unlike IE9 mode, Emulate IE9 mode respects the <!DOCTYPE> directive.

  • Emulate IE8 mode tells Internet Explorer to use the <!DOCTYPE> directive to determine how to render content. Standards mode directives are displayed in IE8 mode and quirks mode directives are displayed in IE5 mode. Unlike IE8 mode, Emulate IE8 mode respects the <!DOCTYPE> directive.

  • Emulate IE7 mode tells Internet Explorer to use the <!DOCTYPE> directive to determine how to render content. Standards mode directives are displayed in Internet Explorer 7 standards mode and quirks mode directives are displayed in IE5 mode. Unlike IE7 mode, Emulate IE7 mode respects the <!DOCTYPE> directive. For many web sites, this is the preferred compatibility mode.

  • IE5 mode renders content as if it were displayed in quirks mode by Internet Explorer 7, which is very similar to the way content was displayed in Microsoft Internet Explorer 5.

IE10 NOTE: As of IE10, quirks mode behaves differently than it did in earlier versions of the browser. In IE9 and earlier versions, quirks mode restricted the webpage to the features supported by IE5.5. In IE10, quirks mode conforms to the differences specified in the HTML5 specification.

Personally, I always choose the http-equiv="X-UA-Compatible" content="IE=edge" meta tag, as older versions have plenty of bugs, and I do not want IE to decide to go into "Compatibility mode" and show my site as IE7 vs IE8 or 9. I always prefer the latest version of IE.

IE11

From Microsoft:

Starting with IE11, edge mode is the preferred document mode; it represents the highest support for modern standards available to the browser.

Use the HTML5 document type declaration to enable edge mode:

<!doctype html>

Edge mode was introduced in Internet Explorer 8 and has been available in each subsequent release. Note that the features supported by edge mode are limited to those supported by the specific version of the browser rendering the content.

Starting with IE11, document modes are deprecated and should no longer be used, except on a temporary basis. Make sure to update sites that rely on legacy features and document modes to reflect modern standards.

If you must target a specific document mode so that your site functions while you rework it to support modern standards and features, be aware that you're using a transitional feature, one that may not be available in future versions.

If you currently use the x-ua-compatible header to target a legacy document mode, it's possible your site won't reflect the best experience available with IE11.

Microsoft Edge (Replacement for Internet Explorer that comes bundled with Windows 10)

Information on X-UA-Compatible meta tag for the "Edge" version of IE. From Microsoft:

Introducing the "living" Edge document mode

As we announced in August 2013, we are deprecating document modes as of IE11. With our latest platform updates, the need for legacy document modes is primarily limited to Enterprise legacy web apps. With new architectural changes, these legacy document modes will be isolated from changes in the "living" Edge mode, which will help to guarantee a much higher level of compatibility for customers who depend on those modes and help us move even faster on improvements in Edge. IE will still honor document modes served by intranet sites, sites on the Compatibility View list, and when used with Enterprise Mode only.

Public Internet sites will be rendered with the new Edge mode platform (ignoring X-UA-Compatible). It is our goal that Edge is the "living" document mode from here out and no further document modes will be introduced going forward.

With the changes in Microsoft Edge to no longer support document modes in most cases, Microsoft has a tool to scan your site to check and see if it has code that is not compatible with Edge.

Chrome=1 Info for IE

There is also chrome=1 that you can use or use together with one of the above options like: <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">. chrome=1 is for Google's Chrome Frame which is defined as:

Google Chrome Frame is an open source browser plug-in. Users who have the plug-in installed have access to Google Chrome's open web technologies and speedy JavaScript engine when they open pages in the browser.

Google Chrome Frame seamlessly enhances your browsing experience in Internet Explorer. It displays Google Chrome Frame enabled sites using Google Chrome’s rendering technology, giving you access to the latest HTML5 features as well as Google Chrome’s performance and security features without in any way interrupting your usual browser usage.

When Google Chrome Frame is installed, the web just gets better without you having to think about it.

But for that plug-in to work you must use chrome=1 in the X-UA-Compatible meta tag.

More info on Chrome Frame can be found here.

Note: Google Chrome Frame only works for IE6 through IE9, and was retired on February 25, 2014. More info can be found here. Thanks to @mck for the link.

Validation:

HTML5:

The page will validate using the W3 Validator only when using <meta http-equiv="X-UA-Compatible" content="IE=Edge">. For other values it will throw the error: A meta element with an http-equiv attribute whose value is X-UA-Compatible must have a content attribute with the value IE=edge. In other words, if you have IE=edge,chrome=1 it will not validate. I ignore this error completely as modern browsers simply ignore this line of code.

If you must have completely valid code then consider doing this on the server level by setting HTTP header. As a note, Microsoft says, 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). See olibre's answer or bitinn's answer for more details on how to set an HTTP header.

XHTML

There isn't an issue with validation when using <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> as long as the tag is properly closed (i.e. /> vs >).

Twitter Bootstrap (V3 and below)

This tag has been strongly recommended by the Bootstrap team since at least 2014, and Bootlint, the linter authored by the twbs team continues to throw a warning when the tag is omitted. The linter distinguishes between warnings and errors, and as such the severity of omitting this tag may be considered minor.

For more information on X-UA-Compatible see Microsoft's Website Defining Document Compatibility.

For more information on what IE supports see caniuse.com.

For more information on Twitter Bootstrap requirements, see the bootlint project wiki page.

相关文章