代码
<meta http-eqiv="X-UA-Compatible" content="ie=edge">
什么是X-UA-Compatible?
X-UA-Compatible是IE8的一个专有属性,他告诉IE8采用何种IE版本去渲染网页,在html中的head标签中使用。可以在微软官方文档获取更多介绍。
为什么要用X-UA-Compatible?
在IE8刚推出的时候,很多网页由于重构的问题,无法适应较高级的浏览器,所以使用X-UA-Comptible标签来强制IE8采用低版本方式渲染
使用下面这段代码后,开发者无需考虑网页是否兼容IE8浏览器,只要确保网页在IE6、IE7下的表现就可以了
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
时至今日,IE6已被微软判了死刑,我们在重构时应首先考虑更完善的IE8下的体验,然后依次回退兼容IE7和6。令我担忧的情况是当IE9正式发布时如果IE6在国内还没被淘汰,那么将出现前端工程师需要面临4个IE版本的疯狂局面(且4个版本显示差异较明显)。
给网站添加X-UA-Compatible标签
我建议使用下面的X-UA-Compatible标签:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
IE=edge告诉IE使用最新的引擎渲染网页,chrome=1则可以激活Chrome Frame
网页中添加方法
在<head>下面添加上述代码即可。WordPress则在主题header.php文件里做修改。
这样的方法简单快捷,但是弊端是代码将无法通过W3C验证。其实这并不是问题,毕竟标准只是标准,如果只有这一个“错误”完全不会有任何不良的影响。
当然你可能像Sivan一样有代码洁癖和一定程度的标准癖,那么我们还可以从服务器端进行这个设置,请继续往下看。
Apache服务器设置方法
嗯⋯⋯我们可以在Apache主机做一些设置让服务器告诉IE采用何种引擎来渲染。在网站作用目录找到或新建.htaccess文件,添加下面的内容保存即可。
<IfModule mod_setenvif.c> <IfModule mod_headers.c> BrowserMatch MSIE ie Header set X-UA-Compatible "IE=Edge" env=ie BrowserMatch chromeframe gcf Header append X-UA-Compatible "chrome=1" env=gcf </IfModule> </IfModule>
Nginx服务器设置方法
现在很多朋友使用Nginx作为搭建环境,当然也是OK的。找到\nginx\conf\nginx.conf并编辑,在server { }区域里(最好是闭合符前面起一行)添加下列代码即可
add_header "X-UA-Compatible" "IE=Edge,chrome=1";
不清楚具体位置的请参考paul irish的配置文件。
好啦,上面就是3种常用的添加方法。我认为这个标签主要是为重构者服务,如果代码的兼容性很强那么不用也罢。
Chrome Frame[1]:Chrome Frame可以让旧版IE浏览器使用Chrome的WebKit渲染引擎处理网页,因此旧版IE用户可以体验到包括HTML5在内的众多现代网页技术。
以上文章基本介绍了X-UA-Compatible,那下面这篇文章则对其进行了更加详细的解释:
!感谢:HTML Meta中X-UA-Compatible详解-[爱死费崇政]
IE兼容模式:
为了帮助确保网页在将来的 Internet Explorer 版本中具有一致的外观,Internet Explorer 8 引入了文档兼容性。文件兼容性用于定义IE如何渲染网页。
怎么查看当前网页在IE下的兼容性模式:
在浏览器中按F12打开IE开发人员工具可以查看到浏览器模式和文档模式。
1、浏览器模式影响浏览器的行为表现以及声明的版本号。
2、文档模式影响DOM的转换、渲染操作,影响的是浏览器的外观表现,决定网页显示成什么样子的。
X-UA-Compatible是自从IE8新加的一个设置,对于IE8以下的浏览器是不识别的。通过在meta中设置X-UA-Compatible的值,可以指定网页的兼容性模式设置。
<meta http-equiv="X-UA-Compatible" content="IE=7" /> 以上代码告诉IE浏览器,无论是否用DTD声明文档标准,IE8/9都会以IE7引擎来渲染页面。 <meta http-equiv="X-UA-Compatible" content="IE=8" /> 以上代码告诉IE浏览器,IE8/9都会以IE8引擎来渲染页面。 <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 以上代码告诉IE浏览器,IE8/9及以后的版本都会以最高版本IE来渲染页面。 <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" /> <meta http-equiv="X-UA-Compatible" content="IE=7,9" />
IE文档兼容性模式所有可能的值:
1、Emulate IE8 mode指示IE使用指令来决定如何编译内容。Standards mode指令会显示成IE8 Standards mode而quirks mode会显示成IE5 mode。不同于IE8 mode,Emulate IE8 mode重视指令。
2、Emulate IE7 mode指示IE使用指令来决定如何编译内容。Standards mode指令会显示成IE7 Standards mode而quirks mode会显示成IE5 mode。不同于IE7 mode,Emulate IE7 mode重视指令。对于许多网页来说这是最推荐的兼容性模式。
3、IE5 mode 编译内容如同IE7的quirks mode之显示状况,和IE5中显示的非常类似。
4、IE7 mode编译内容如同IE7的standards mode之显示状况,无论网页是否含有指令。
5、IE8 mode提供对业界标准的最高支持,包含 W3C Cascading Style Sheets Level 2.1 Specification和W3C Selectors API,并有限的支持 W3C Cascading Style Sheets Level 3 Specification (Working Draft)。
6、Edge mode指示IE以目前可用的最高模式显示内容。当使用IE8时其等同于IE8 mode。若(假定)未来放出支持更高兼容性模式的IE,使用Edge mode的页面会使用该版本能支持的最高模式来显示内容。同样的那些页面在使用IE8浏览时仍会照常显示。
注意事项:
1、根据官网定义X-UA-compatible 标头不区分大小写;不过,它必须显示在网页中除 title 元素和其他 meta 元素以外的所有其他元素之前。如果不是的话,它不起作用
2、content的内容是IE=8,或者IE=edge等值,注意不是IE8或者直接写个edge的值,否则不起作用
更为具体的实践与解释参见如下文章: