HTML meta X-UA-Compatible 的用处与 IE 兼容模式

为什么要用 X-UA-Compatible

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="x-ua-compatible" content="IE=edge,chrome=1" />
    <title></title>
  </head>
  <body></body>
</html>

如上代码，我们在 meta 中增加了 <meta http-equiv="x-ua-compatible" content="IE=edge,chrome=1">，所以我们先看一下 x-ua-compatible 是做什么的

x-ua-compatible

在早期的 IE 浏览器当中，由于 IE/5/6/7/8/9 等等，都会遇到一些兼容性的问题，假如我们的网站为了兼容 IE6 而在代码中写了一些 IE6 才能识别的代码时，即使我们的浏览器是 IE8，IE 浏览器也会为了兼容会将当前网站以 IE6 兼容模式渲染。

如下，如果我们设置 content="IE=8"，这标志着，如果我们的浏览器是 IE8，那么当前网站也会以 IE8 模式渲染，但我们的浏览器版本是 IE6，那么它就是无效的，相反如果我们的浏览器是 IE9，那么网站依旧会以 IE8 兼容模式渲染。

所以当 content 设置为 IE 系列时，高版本的浏览器可以向下渲染，而低版本的浏览器不能向上渲染

那么设置这个属性的作用是什么呢？当我们的网站只需要兼容到 IE8 时，就可以指定此属性，无论我们当前的 IE 浏览器是多高的版本，你都给我渲染为 IE8 模式。

content="IE=edge" 的用处

IE 浏览器将总是使用最新版本的文档模式，如用 IE8 访问就是 IE8 文档模式，用 IE9 访问就是 IE9 模式。

那么为什么要设置这个值，上面提到了 IE 浏览器会根据你的代码内容自动选择兼容模式，所以当我们没有兼容性要求时，就可以指定为用户浏览器的最高版本

chrome=1 的作用是什么

设置 chrome=1 会在某种情况下，让 IE 浏览器采用 chrome 内核渲染。

首先用户需要安装 chrome 浏览器
其次需要安装插件 Google Chrome Frame https://www.chromium.org/developers/how-tos/chrome-frame-getting-started/
这时我们用 IE 浏览器打开带有 chrome=1 的网页时，会发现它是用 chrome 内核进行渲染的