meta标签功能之兼容主流浏览器
其实一般新手估计都不会注意这个问题，新手大多都会迫不及待的为了实现网页而去重视代码，往往忽视最重要的meta标签，我就是这样，我也是做了两年的前端才算发现这个里面有很大的学问
我最近在一个人独自开发一个网站，所以很多事情都要考虑，最后关于所有浏览器兼容问题，本来我以为要改很多代码，因为我发现有的浏览器居然不兼容，后来看见
这位大佬写的文章IE 兼容性标记 X-UA-Compatible 解释和用法，读完之后立刻觉得神清气爽！
我们要了解 IE 的文档模式分几种。
IE=5 Quirks Mode IE=7 IE7 mode IE=8 IE8 mode IE=9 IE9 mode IE=10 IE10 mode IE=11 IE11 mode
如上所示，IE7 以上版本都有一个同名的文档模式，而 IE6 和 IE6 以下则只有一个模式，叫“Quirks Mode”。有人翻译成怪异模式，
叫什么不重要，我们知道这基本上等同于模拟 IE6 即可，因为 IE5 是比 IE6 更加史前的浏览器，现代人类基本上找不到还有人在使用。
END
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"/>
通过meta代码强制浏览器使用WebKit内核
如果网站采用最新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>
自2016年1月12日起，Microsoft 不再为 IE 11 以下版本提供相应支持和更新。没有关键的浏览器安全更新，用户的电脑可能易受有害病毒、间谍软件和其他恶意软件的攻击，它们可以窃取或损害业务数据和信息。建议为网站添加旧版IE升级提示，不再兼容旧版IE！
但是我在使用过程中发现在猎豹浏览器和QQ浏览器IE内核下一直停留在升级浏览器页面，所以为了用户体验效果，我并没有完全按照以上写法，
<meta name="renderer" content="webkit"> <meta name="force-rendering" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
然后加了一段js判断浏览器的代码，逻辑是如果检测到是IE内核就提醒切换浏览器内核模式或者更换为其他浏览器
