【META 标签的 HTTP-EQUIV=“X-UA-COMPATIBLE“ 使用说明】

参考：【META 标签的 HTTP-EQUIV="X-UA-COMPATIBLE" 使用说明】

原文出处：【META 标签的 HTTP-EQUIV="X-UA-COMPATIBLE" 使用说明】

1. X-UA-COMPATIBLE 存在的意义: 指定 IE 浏览器 解析网页时 使用哪个版本 (文档模式)

• 指定 IE 浏览器 解析网页时 使用哪个版本:
  • 限定 使用的 IE 浏览器版本:
    • IE 8 版本 及以上版本: X-UA-Compatible 属性值 是 IE 浏览器在 IE 8 版本开始 提供的一个特性
      • 针对 IE 8 以上浏览器的一个属性，IE 8以下版本 无法识别。就是说 IE 8 以上浏览器 遇到这个属性,才会执行 content 的描述.
      • 在 IE7、IE6中无效: 因为 X-UA-Compatible属性值 是 IE8 才开始支持的
    • 大小写: 不敏感。
  • 指定 (IE 浏览器) 解析时的 文档模式:
    • 允许开发者 通过设置 meta 标签 ,来指定 IE 浏览器在 解析网页时 使用的文档模式,即 浏览器的哪个版本。
  • IE 浏览器 版本模拟: 即, 这个标签 可以实现 IE 浏览器 版本模拟。
    • 向下兼容 / 只模拟 更低版本: 通过 X-UA-Compatible属性值, 只能模拟 比当前版本 更低的版本，并不能 模拟高版本。

---

• 示例1: 在 高版本 浏览器中, 强制用 浏览器低版本 渲染
  • 在 IE8 刚推出的时候，很多网页 由于重构的问题，无法适应 较高级的浏览器，所以使用 X-UA-Compatible 标签 强制 IE8 采用 低版本方式渲染。
  • 比如, 为了避免制作出的页面 在IE8 下面出现错误，建议直接将 IE8 使用IE7 进行渲染
    • 这样,开发者 无需考虑 网页是否兼容 IE8 浏览器，只要确保 网页在 IE7下的 正常显示就可以了

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

---

• IE 浏览器的 文档模式
  • IE=5 : Quirks Mode (美 /kwɜːrk/,怪异 模式)
    • IE6 和 IE6 以下,只有一个模式，叫“Quirks Mode”。
    • 等同于 模拟 IE6 即可，因为 IE5 是比 IE6 更加老旧的浏览器,基本上 没有人在用了.
  • IE=7 : IE7 mode
  • IE=8 : IE8 mode
  • IE=9 : IE9 mode
  • IE=10 : IE10 mode
  • IE=11 : IE11 mode
    • IE7 及以上版本, 都有一个 同名的文档模式

---

2. X-UA-COMPATIBLE 的 使用示例

• 示例1: 强制浏览器 按照特定的 版本标准 进行渲染，但不支持 IE7及以下版本。

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

---

• 示例2:强制 IE8 浏览器, 使用 IE7 进行渲染

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

---

• 示例3: (不建议 使用的语法) 指定 某个 IE版本的文档模式，但也允许例外。
  • 在 IE 版本号 前面加上 Emulate ，代表，
    • 如果网页开头 有 <!DOCTYPE>标记 就使用该 IE版本的标准文档模式
    • 否则使用 怪异模式（即等同于 IE=IE5）,即,模拟 IE6

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

• 浏览器 模拟版本选择

  • 如果网页开头 带有 <!DOCTYPE>标记，则模拟 IE7， 等同于：

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

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

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

• 注意: 不建议使用 这个语法。

---

• 示例4: 总是使用 最新版本 文档模式,不准备兼容 所有 旧版 IE

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

• MDN 网站 使用的 就是这个模式,紧跟在 字符编码的后面,排在 第二个子元素的位置

• 

  就是 当前的 浏览器版本: 如, 用 IE8 访问, 就是 IE8 文档模式，用 IE9 访问, 就是 IE9 模式，用 IE10 访问, 就是 IE10 模式，用 IE11 访问, 就是 IE11 模式。

  • 任何 IE 版本 都以 当前版本 所支持的 最高级标准 模式渲染，避免 版本升级造成的影响。简单的说，就是什么版本 IE 就用什么版本的标准模式渲染。

• 省略的影响:

  • 注意：此声明 并不是多此一举，如果不使用 content="IE=Edge" 属性值，IE 浏览器 会根据网页内容 采用 兼容视图，可能 采用 更低版本。

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

---

• 示例5: ★ 目前 最佳的兼容模式 — 如果安装了 Google Chrome Frame （谷歌浏览器 內嵌框架）, 则使用 谷歌浏览器 内核模式，否则使用 最新的 IE 模式。
  • 针对 IE 6，7，8 等版本的 浏览器插件 Google Chrome Frame，可以让用户的浏览器外观 依然是 IE的菜单和界面，但用户在 浏览网页时，实际上使用的是 Google Chrome 谷歌浏览器 内核。
    • 如果不指定ie=edge,仅指定chrome=1 时，当用户浏览器 没有 chrome 内核时，会弹出提示框，提醒用户 安装该内核。

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

• 淘宝网,使用的 就是这个 IE 版本兼容模式,也是紧跟在 字符编码的后面,位于 第二个子元素的位置

  

---

• 示例6: 由于 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版本。）
• 不兼容 旧版IE: 自 2016年1月12日起，Microsoft 不再为 IE 11 以下版本 提供相应支持和更新。
  • 没有 浏览器安全更新，用户的电脑 可能易受 有害病毒、间谍软件和其他恶意软件的攻击，窃取或损害业务 数据和信息。建议为网站添加 旧版IE升级提示，不再兼容旧版IE！

---

3. 双核浏览器 兼容思路 (搭配 META 标签)

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

      • <meta name="renderer" content="webkit"/>(最常用)

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

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

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

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

---

• 示例1: 如果网站采用 最新 CSS3/HTML5 编写，应该令其 使用 Chromium 内核也就是 Webkit 内核 渲染。
• ① 360 浏览器、QQ 浏览器 等 国产双核浏览器

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

    • 淘宝网 使用的,就是这个,位于 head 第三个子元素的位置

    • 

• ② 其他 双核浏览器

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

  • CSDN 网站,3种都使用了,位于head比较靠前的位置

  • 

---

• 示例2: 如果网站在 IE 浏览器 效果更好，可以要求其 使用 IE标准内核渲染。

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