【转】使用Chrome Frame，完全解决浏览器兼容问题

本文转自http://www.ryanbay.com/?p=269，感谢该做者的总结

 

X-UA-Compatible是自从IE8新加的一个设置，对于IE8如下的浏览器是不识别的。 经过在meta中设置X-UA-Compatible的值，能够指定网页的兼容性模式设置。

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

 

meta tag > http header

 

meta tag > http header

经常使用的例子：

 

<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"> <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> #以上代码IE=edge告诉IE使用最新的引擎渲染网页，chrome=1则能够激活Chrome Frame.

我的以为本文颇有意义，对于ie一直存在的兼容问题给予一个解决办法，能够考虑在工做中使用。

如下是正文，为方便oser阅读，原文抄录以下，有关具体状况请参考原做者。

Google Chrome Frame，谷歌浏览器内嵌框架（简称GCF），是一个使你机器上的Internet Explorer系列浏览器鸟枪换炮，用上webkit内核的Chrome引擎，但IE浏览器外观上仍是IE的外观的免费插件。

不相信吗？使用用IE浏览器打开GCF安装页，按照提示安装后，重启IE，再打开gcf:about:version，如今你会看到chrome浏览器的内核信息，说明Chrome内核已经植根于你的IE浏览器上了。

但并不是你的IE访问任意网页就会自动的使用Chrome内核来解析，须要两种方式：一是在网址前面加上”gcf:“，好比gcf:http://gmail.com来访问；二是在网页的meta信息中加入一句：

<meta http-equiv="X-UA-Compatible" content="chrome=1">

这里chrome=1表明全部版本的IE浏览器都使用Chrome内核解析网页，chrome属性还有其余的值，好比chrome=IE7，表明IE7或如下版本的浏览器才使用chrome内核，chrome=IE6和chrome=IE8等依此类推。

做为一个网页开发者，你会不会想到有了这个插件，之后就能够大胆使用各类CSS3样式，只要Chrome下显示正确，IE下也能显示正确了！没错！但前提是用户会安装这个插件吗？如何提供一个友好的引导安装界面呢，Google帮咱们解决了这个问题。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script> <div id="prompt"></div> <script> window.attachEvent("onload", function() { CFInstall.check({ mode: "overlay", node: "prompt" }); }); </script>

在body标签中加入这段js代码，可使得IE打开该网页时出现友好的GCF安装引导iframe框。这段代码不须要存在于

<!--[if IE]>...<![endif]-->

之中，js中已经作了浏览器的判断。

CFInstall.min.js是官方提供的文件，CFInstall.check()方法有许多可选项，其中包括：

• mode: “inline” 默认值，GCF安装引导的iframe结构将存在于node选项指定id的元素中最前面位置，属于文档流的一部分
• mode: “overlay” 该iframe以弹出层显示，弹出层将会在页面可视范围内居中
• mode: “popup” 该iframe以新开窗口/选项卡显示，相似于target:_blank的效果
• node: “” 指定iframe结构的dom结点位置，在mode:”inline”下有效
• url: “” 点击安装按钮跳转到的连接地址，默认为GCF安装文件地址
• destination: “” GCF安装完成后页面跳转到的连接地址
• className: “” 在mode:”inline”下对iframe指定新的class名，美化iframe界面时颇有用，默认的class为chromeFrameInstallDefaultStyle

OK，了解了这么多，相信你已经跃跃欲试了，我在个人博客上开启了chrome=IE8并加上了GCF的友好安装指引，欢迎访问比较IE下和Chrome下的渲染差别。

更多GCF的参考资料：

• 官方开发者文档：http://www.chromium.org/developers/how-tos/chrome-frame-getting-started
• html5rocks的补充介绍：http://www.html5rocks.com/en/tutorials/google-chrome-frame/
• Chrome与GCF的渲染差别：http://www.chromium.org/developers/how-tos/chrome-frame-getting-started/differences-between-chrome-and-chrome-frame
• from：https://www.oschina.net/question/208081_89397