[FE] IE兼容性模式X-UA-Compatible

<u></u>X-UA-Compatible是自从IE8新加的一个设置,对于IE8以下的浏览器是不识别的。
通过在meta中设置X-UA-Compatible的值,可以指定网页的兼容性模式设置。

在网页中指定的模式优先权高于服务器中(通过HTTP Header)所指定的模式。
兼容性模式设置优先级:

meta tag > http header

例子:

告诉IE浏览器,无论是否用DTD声明文档标准,IE8/9都会以IE7引擎来渲染页面
<meta http-equiv="X-UA-Compatible" content="IE=7">
告诉IE浏览器,IE8/9都会以IE8引擎来渲染页面
<meta http-equiv="X-UA-Compatible" content="IE=8">
告诉IE浏览器,IE8/9及以后的版本都会以最高版本IE来渲染页面
<meta http-equiv="X-UA-Compatible" content="IE=edge">
chrome=1表示可以激活Chrome Frame
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">

注:
Chrome Frame可以让旧版IE浏览器使用Chrome的WebKit渲染引擎处理网页,因此旧版IE用户可以体验到包括HTML5在内的众多现代网页技术。

注意事项:
(1)根据官网定义X-UA-compatible 标头不区分大小写;不过,它必须显示在网页中除title元素和其他meta元素以外的所有其他元素之前。如果不是的话,它不起作用
(2)content的内容如果不写“IE=”,将不起作用。

服务器端配置方案:

如果对WEb服务器了解,可以直接配置一下VirtualHost
Apache:

<IfModulemod_setenvif.c>
<IfModulemod_headers.c>
BrowserMatch MSIE ie
    Header set X-UA-Compatible "IE=Edge" env=ie
BrowserMatchchromeframegcf
    Header append X-UA-Compatible "chrome=1" env=gcf
</IfModule>
</IfModule>

**Nginx: **

add_header "X-UA-Compatible" "IE=Edge,chrome=1";

参考:
http://lightcss.com/add-x-ua-compatible-meta-to-your-website/
http://desert3.iteye.com/blog/1638591

[Specifying legacy document modes]
https://msdn.microsoft.com/en-us/library/jj676915(v=vs.85).aspx

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 随着html5的普及和Web技术的净化,从Windows XP的IE6到IE8、IE9、IE10、IE11,Edg...
    波段顶底阅读 2,301评论 1 1
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,868评论 1 92
  • Sublime的常用插件及功能 AutoFileName:自动补全文件路径及名称的插件。如插入图片。 Bracke...
    饥人谷_缪维颖阅读 989评论 6 4
  • •前端面试题汇总 一、HTML和CSS 21 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? ...
    Simon_s阅读 2,241评论 0 8
  • 1. 网页乱码的问题是如何产生的? 因为一份文档保存在计算机的时候不是以我们看到的样子,而是用计算机理解的样子去保...
    老虎爱吃母鸡阅读 1,688评论 0 2