系统前端之前的要求是IE7/8/9 , 客户提出要兼容IE10。通过测试发现了不少兼容问题,修改起来肯定要花不少时间。在网上搜了一下,发现原来一行代码就可以搞定。下面是一篇我认为较好的介绍。
X-UA-Compatible是神马?
X-UA-Compatible是IE8的一个专有<meta>属性,它告诉IE8采用何种IE版本去渲染网页,在html的<head>标签中使用。可以在微软官方文档获取更多介绍。
为什么要用X-UA-Compatible?
在IE8刚推出的时候,很多网页由于重构的问题,无法适应较高级的浏览器,所以使用X-UA-Compatible标签强制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[1]。
网页中添加方法
在<header>下面添加上述代码即可。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在内的众多现代网页技术
原文地址:http://lightcss.com/add-x-ua-compatible-meta-to-your-website/
在使用这个标签时,还要注意一些细节,否则标签不能起到期望的作用。
下面一篇同样来自网上的介绍。
关于IE9中X-UA-Compatible失效的问题
今天在IE9中调试Wordpress主题的时候发现无论X-UA-Compatible如何设置,IE9都是用Quirks Mode渲染,好端端的W3C标准页面被硬生生渲染成IE5,惨不忍睹。而在F12工具中强制调成IE9标准渲染模式,全部正常。于是研究了一下问题在哪。
关于X-UA-Compatible和IE的Quirks Mode模式,Google一下有很多说明,这里有三篇很详细的文章[1][2][3]:
http://msdn.microsoft.com/en-us/library/cc288325(VS.85).aspx
http://www.fantxi.com/blog/archives/browser-mode/
http://blog.csdn.net/wingeek/article/details/6198996
先上我主题header.php的源码。这个源码是从官方自带主题twentyeleven修改而来的,结构没有什么变动:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<!--[if IE 9]>
<html id="ie9" <?php language_attributes(); ?> xmlns="http://www.w3.org/1999/xhtml">
<![endif]-->
<!--[if lte IE 8]>
<html id="ie" <?php language_attributes(); ?> xmlns="http://www.w3.org/1999/xhtml">
<![endif]-->
<!--[if !(IE)]><!-->
<html <?php language_attributes(); ?> xmlns="http://www.w3.org/1999/xhtml">
<!--<![endif]-->
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<meta http-equiv="Content-Type" charset="<?php bloginfo( 'charset' ); ?>" />
上面第12行无论如何设置content都是无效的,IE9不会识别。 搜索了一下,发现有两种说法。一种认为在X-UA-Compatible之前必须至少有一个meta标签[4]。另一种说法是X-UA-Compatible之前不能有script标签[5],后一种说法应该是比较靠谱的,因为在官方的说明文章里有这么一句[1]:
The X-UA-Compatible header is not case sensitive; however, it must appear in the header of the webpage (the HEAD section) before all other elements except for the title element and other meta elements.
但问题是我源码的相应位置并没有script标签。迟疑很久,我怀疑是之前IE注释的问题,不仅如此,经过调试发现这些注释在IE中根本没有生效(IE注释的作用见参考资料[6])。于是试着把它去掉变成:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html <?php language_attributes(); ?> xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<meta http-equiv="Content-Type" charset="<?php bloginfo( 'charset' ); ?>" />
一切恢复正常了。然后我把IE注释移到body标签,注释也生效了。
X-UA-Compatible是神马?
X-UA-Compatible是IE8的一个专有<meta>属性,它告诉IE8采用何种IE版本去渲染网页,在html的<head>标签中使用。可以在微软官方文档获取更多介绍。
为什么要用X-UA-Compatible?
在IE8刚推出的时候,很多网页由于重构的问题,无法适应较高级的浏览器,所以使用X-UA-Compatible标签强制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[1]。
网页中添加方法
在<header>下面添加上述代码即可。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在内的众多现代网页技术
原文地址:http://lightcss.com/add-x-ua-compatible-meta-to-your-website/
在使用这个标签时,还要注意一些细节,否则标签不能起到期望的作用。
下面一篇同样来自网上的介绍。
关于IE9中X-UA-Compatible失效的问题
今天在IE9中调试Wordpress主题的时候发现无论X-UA-Compatible如何设置,IE9都是用Quirks Mode渲染,好端端的W3C标准页面被硬生生渲染成IE5,惨不忍睹。而在F12工具中强制调成IE9标准渲染模式,全部正常。于是研究了一下问题在哪。
关于X-UA-Compatible和IE的Quirks Mode模式,Google一下有很多说明,这里有三篇很详细的文章[1][2][3]:
http://msdn.microsoft.com/en-us/library/cc288325(VS.85).aspx
http://www.fantxi.com/blog/archives/browser-mode/
http://blog.csdn.net/wingeek/article/details/6198996
先上我主题header.php的源码。这个源码是从官方自带主题twentyeleven修改而来的,结构没有什么变动:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<!--[if IE 9]>
<html id="ie9" <?php language_attributes(); ?> xmlns="http://www.w3.org/1999/xhtml">
<![endif]-->
<!--[if lte IE 8]>
<html id="ie" <?php language_attributes(); ?> xmlns="http://www.w3.org/1999/xhtml">
<![endif]-->
<!--[if !(IE)]><!-->
<html <?php language_attributes(); ?> xmlns="http://www.w3.org/1999/xhtml">
<!--<![endif]-->
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<meta http-equiv="Content-Type" charset="<?php bloginfo( 'charset' ); ?>" />
上面第12行无论如何设置content都是无效的,IE9不会识别。 搜索了一下,发现有两种说法。一种认为在X-UA-Compatible之前必须至少有一个meta标签[4]。另一种说法是X-UA-Compatible之前不能有script标签[5],后一种说法应该是比较靠谱的,因为在官方的说明文章里有这么一句[1]:
The X-UA-Compatible header is not case sensitive; however, it must appear in the header of the webpage (the HEAD section) before all other elements except for the title element and other meta elements.
但问题是我源码的相应位置并没有script标签。迟疑很久,我怀疑是之前IE注释的问题,不仅如此,经过调试发现这些注释在IE中根本没有生效(IE注释的作用见参考资料[6])。于是试着把它去掉变成:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html <?php language_attributes(); ?> xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<meta http-equiv="Content-Type" charset="<?php bloginfo( 'charset' ); ?>" />
一切恢复正常了。然后我把IE注释移到body标签,注释也生效了。
结论:为防止失效,X-UA-Compatible最好紧跟在head之后,之前不要有任何不标准的标签。
地址:碌人乘凉