X-UA-Compatibles

今天在看京东网页代码的时候，发现了X-UA-Compatibles 这个元信息属性，不是很清楚，百度了一下，做下记录

X-UA-Compatible 属性是 IE 浏览器在 IE8 版本开始提供的一个特性，允许开发者通过设置 meta 标记来规定 IE 浏览器在解析网页时使用的文档模式。

通俗点说，这个标签可以实现 IE 浏览器版本模拟。

首先，我们要了解，通过 X-UA-Compatible 属性只能模拟比当前版本更低的版本，并不能模拟高版本。

其次，我们要了解 IE 的文档模式分几种。

• Quirks Mode
• IE7 mode
• IE8 mode
• IE9 mode
• IE10 mode
• IE11 mode

IE7 以上版本都有一个同名的文档模式，而 IE6 和 IE6 以下则只有一个模式，叫“Quirks Mode”。有人翻译成怪异模式，叫什么不重要，我们知道这基本上等同于模拟 IE6 即可，因为 IE5 是比 IE6 更加史前的浏览器，现代人类基本上找不到还有人在使用。

X-UA-Compatible 标记语法

第一种，直接指定某个IE版本的标准文档模式。

以下是要求模拟 IE8 的例子：

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

（注意：这在IE7、IE6中无效，因为 X-UA-Compatible 是 IE8 才开始支持的）

以下是要求模拟 IE9 的例子：

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

（注意：这不仅在IE7、IE6中无效，在 IE8 中也无效，因为不能模拟高于当前的版本）

第二种，指定某个IE版本，但也允许例外。

在IE版本号前面加上 Emulate ，代表，如果网页开头有 <!DOCTYPE> 标记就使用该IE版本的标准文档模式，否则使用怪异模式（即等同于 IE=IE5）

以下是要求模拟 IE8 的例子：

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

根据例子代码，如果你的网页开头带有 <!DOCTYPE> 标记，则模拟 IE8， 等同于：

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

如果你的网页开头没有 <!DOCTYPE> 标记，则模拟 IE6， 等同于：

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

不建议使用这个语法。

第三种，总是使用最新版本文档模式。

以下是例子：

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

根据例子代码，IE浏览器将总是使用最新版本的文档模式，如用 IE8 访问就是 IE8 文档模式，用 IE9 访问就是 IE9 模式，用 IE10 访问就是 IE10 模式，用 IE11 访问就是 IE11 模式。

注意：此声明并不是多此一举，如果你不使用 IE=edge 标记，IE浏览器会根据你的网页内容采用兼容视图，可能采用更低版本。

除非不准备兼容所有旧版IE，否则也不建议使用这个语法。

除了标准用法之外，还有一些特殊用法，如：

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

这段代码的意思是，如果安装了 Google Chrome Frame （谷歌浏览器內嵌框架）则使用谷歌浏览器内核模式，否则使用最新的IE模式。

IE跨版本兼容思路

如上所述，X-UA-Compatible 只能模拟比当前安装版本更低的版本，不能模拟更高版本。根据这个特性，兼容思路如下。

如果我们要往下兼容到 IE8 ，那么我们网页则应该提前添加好标记：

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

网页HTML/CSS/JS代码按 IE8 浏览器文档模式进行兼容性处理，不使用超过 IE8 文档模式的特性。

那么，我们就只需要维护一份 IE8 兼容代码，而用户无论是在 IE9 / IE10 / IE11 访问都是如同 IE8 访问一样。（要往下兼容到 IE9 或者 IE10 都以此类推。）

然后为 IE8 以下版本添加旧版IE浏览器升级提示，或跳转到IE浏览器升级提示页，如 X-UA-Compatible 代码下添加：

<!--[if lte IE 7]><script>window.location.href='http://support.dmeng.net/upgrade-your-browser.html?referrer='+encodeURIComponent(window.location.href);</script><![endif]-->

如无特殊情况，由于 IE11 以下版本都已停止更新，无论是从代码工作量还是从用户安全的角度来讲，我们都不应该再兼容 IE11 以下版本。

在这种情况下，我们可以使用如下标记：

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

然后为 IE11 以下版本添加旧版IE浏览器升级提示，或跳转到IE浏览器升级提示页，在 X-UA-Compatible 代码下添加：

<script>/*@cc_on window.location.href="http://support.dmeng.net/upgrade-your-browser.html?referrer="+encodeURIComponent(window.location.href); @*/</script>

（IE10不支持 if IE 语句，但 @cc_on 是 IE10 及更旧版IE特有的条件编译语句，因此可以用来判断是否除 IE11 的其他IE版本。）

双核浏览器兼容思路

国产浏览器大多带有 Chromium 内核和 IE 内核，在用户访问网页时双核浏览器根据网页内容自动选择内核。不过，双核浏览器也提供了类似 X-UA-Compatible 特性的 meta 标记，允许网页开发者通过标记选择内核。

一、使用 Chromium 内核（极速模式）

<meta name="renderer" content="webkit"/>

二、使用 IE 8/9/10/10 内核（IE标准模式，部分支持 HTML5）

<meta name="renderer" content="ie-stand"/>

三、使用 IE 6/7 内核（IE兼容模式，不支持 HTML5）

<meta name="renderer" content="ie-comp"/>

如果网站采用最新CSS3/HTML5编写，那么，我们应该令其使用 Chromium 内核（也就是 Webkit 内核）渲染。

代码如下：

<meta name="renderer" content="webkit"/>

<meta name="force-rendering" content="webkit"/>

第一行作用于360浏览器、QQ浏览器等国产双核浏览器，第二行作用于其他双核浏览器。

如果网站在 IE 浏览器效果更好，那么，我们可以要求其使用IE标准内核渲染。

代码如下：

<meta name="renderer" content="ie-stand"/>

实际上，由于 IE11 以下版本都已经停止更新，绝大部分前端开源项目都已经不再兼容 IE11 以下的旧版IE。往下兼容到 IE8 版本的网站已经寥寥无几，兼容 IE7/IE6 更是近乎绝迹。

但是，即使每天只有稀稀拉拉几个旧版IE用户访问网站，我们也不应该让他看到一屏乱码。面对依然使用旧版IE的用户，我们可以友好地提示其升级浏览器后再访问。

通过以下代码，当用户使用已经停止更新的IE10或旧版IE访问网站将会自动跳转到浏览器升级页：

<script>/*@cc_on window.location.href="http://support.dmeng.net/upgrade-your-browser.html?referrer="+encodeURIComponent(window.location.href); @*/</script>

综上所述，下面我们提供三个代码示例。

示例一：适合针对特定IE版本进行过优化的网站。

示例场景：网站针对 IE9 做了优化，IE10 / IE11 和双核浏览器访问时默认采用 IE9 标准文档模式。而 IE8 及以下IE浏览器访问则跳转至升级提示页。

代码如下：

<meta name="renderer" content="ie-stand"/>

<meta name="force-rendering" content="ie-stand"/>

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

<!--[if lte IE 8]><script>window.location.href='http://support.dmeng.net/upgrade-your-browser.html?referrer='+encodeURIComponent(window.location.href);</script><![endif]-->

示例二：适合针对特定IE版本进行过优化但对HTML5更加友好的网站。

示例场景：网站针对 IE9 做了优化，但 Chrome 访问效果更佳，双核浏览器访问时默认采用 Chrome 内核，IE10 / IE11 访问时优先采用 IE9 标准文档模式。而 IE8 及以下IE浏览器访问则跳转至升级提示页。

代码如下：

<meta name="renderer" content="webkit"/>

<meta name="force-rendering" content="webkit"/>

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

<!--[if lte IE 8]><script>window.location.href='http://support.dmeng.net/upgrade-your-browser.html?referrer='+encodeURIComponent(window.location.href);</script><![endif]-->

示例三：只支持微软仍然支持和更新的IE11浏览器。

示例场景：考虑到微软已经停止更新IE10以及更低版本的IE，为了用户使用安全和更好的使用体验，不再支持旧版IE。双核浏览器访问时默认采用 Chrome 内核，IE11 以下旧版IE访问时跳转到升级提示页。

（@cc_on 是 IE10 及更旧版IE特有的条件编译语句，因此可以用来判断是否除 IE11 的其他IE版本。）

代码如下：

<meta name="renderer" content="webkit"/>

<meta name="force-rendering" content="webkit"/>

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

<script>/*@cc_on window.location.href="http://support.dmeng.net/upgrade-your-browser.html?referrer="+encodeURIComponent(window.location.href); @*/</script>