解决浏览器模式兼容问题

风尘

网站前端开发在我看来是开发中最让人郁闷的工作,并不是其技术有多难,而是因为它的各种不稳定因素。今天浏览器厂商一个标准,明天浏览器厂商一个标准,这家厂商一个标准,那家一个厂商一个标准。前端开发大多数时候并不是因为一个布局实现方式而苦恼,而是为了各种浏览器的兼容。然而,最让人头疼的就属IE6啦。虽然这个浏览器,曾经立下过汗马功劳,但真的到了功成身退的时候了。

IE7在我看来只是微软公司临时抱佛脚的替代品,过渡产品自然用的就比较少,就像曾经的vista系统。
从IE8浏览器开始,微软向 Web 标准进行靠拢。改变重大,但是IE6的市场占有率仍然居高不下,且其代码标准与W3C的标准有许多出入,故按照 IE6/7 的规范来编写代码在IE8中也未必兼容,为了解决这个问题IE8浏览器增加了一种叫做“兼容性视图”的功能。从此处牵出两个功能“浏览器模式”和“文档模式”。
“浏览器模式”用于切换IE针对该网页的默认文档模式、对不同版本浏览器的条件备注解析、发送给网站服务器的用户代理(User-Agent)字符串的值。网站可以根据浏览器返回的不同用户代理字符串判断浏览器的版本和安装的功能,这样就可以向不同的浏览器返回不同的页面内容。
“文档模式”用于指定IE的页面排版引擎(Trident)以哪个版本的方式来解析并渲染网页代码。切换文档模式会导致网页被刷新,但不会更改用户代理字符串中的版本号,也不会从服务器重新下载网页。切换浏览器模式的同时,浏览器也会自动切换到相应的文档模式。
问题出现了,既然这么多模式那么怎么选择使用哪种模式,X-UA-Compatible出现了这是一匹神马。有了它开发者无需考虑网页是否兼容IE8浏览器,只要确保网页在IE6、IE7下的表现就可以了。

页面中用法:

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

在<head>标签下面加入上面代码:IE=edge告诉IE使用最新的引擎渲染网页(其它可选值:IE5、IE6、IE7、IE8 ),chrome=1则可以激活Chrome Frame(可以让旧版IE浏览器使用Chrome的WebKit渲染引擎处理网页,因此旧版IE用户可以体验到包括HTML5在内的众多现代网页技术。)
参考:http://blogs.msdn.com/b/ie/archive/2010/06/16/ie-s-compatibility-features-for-site-developers.aspx

Apache设置方法:[信息参考自]
可以在Apache主机做一些设置让服务器告诉IE采用何种引擎来渲染。在网站作用目录找到或新建.htaccess文件,添加下面的内容保存即可。

1
2
3
4
5
6
7
8
<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>

Ngnix设置方法:
找到\nginx\conf\nginx.conf并编辑,在server { }区域里(最好是闭合符前面起一行)添加下列代码即可。

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

360浏览器内核控制:
由于WebKit内核的浏览器逐渐盛行,越来越多的人加入它的行列,然而国内windows系统的大环境下IE几乎是每台电脑必有的浏览器,所以目前很多网站只支持IE浏览器。如:银行系统
从而越来越多的双核浏览器诞生了。其中360浏览器就是个典型的Chrome+IE=360,相信很多人都发现过有的页面用360浏览器打开是IE内核,有的是WebKit内核。然而当我的只想用WebKit内核或是IE内核时,360提借供了一个内核选择功能:

html代码:

1
2
3
4
5
6
7
<html>
<head>
<meta name="renderer" content="webkit|ie-comp|ie-stand">
</head>
<body>
</body>
</html>

content的取值为webkit,ie-comp,ie-stand之一,区分大小写,分别代表用webkit内核,IE兼容内核,IE标准内核。
详细参考:http://se.360.cn/v6/help/meta.html