【轉(zhuǎn)】使用Chrome Frame，徹底解決瀏覽器兼容問(wèn)題

本文轉(zhuǎn)自http://www.cnblogs.com/xuan52rock/p/6735860.html，感謝該作者的總結(jié)

?

X-UA-Compatible是自從IE8新加的一個(gè)設(shè)置，對(duì)于IE8以下的瀏覽器是不識(shí)別的。 通過(guò)在meta中設(shè)置X-UA-Compatible的值，可以指定網(wǎng)頁(yè)的兼容性模式設(shè)置。

在網(wǎng)頁(yè)中指定的模式優(yōu)先權(quán)高于服務(wù)器中(通過(guò)HTTP Header)所指定的模式。 兼容性模式設(shè)置優(yōu)先級(jí)：

?

meta tag > http header

?

meta tag?>?http header

常用的例子：

?

<meta http-equiv="X-UA-Compatible" content="IE=7"> #以上代碼告訴IE瀏覽器，無(wú)論是否用DTD聲明文檔標(biāo)準(zhǔn)，IE8/9都會(huì)以IE7引擎來(lái)渲染頁(yè)面。 <meta http-equiv="X-UA-Compatible" content="IE=8"> #以上代碼告訴IE瀏覽器，IE8/9都會(huì)以IE8引擎來(lái)渲染頁(yè)面。 <meta http-equiv="X-UA-Compatible" content="IE=edge"> #以上代碼告訴IE瀏覽器，IE8/9及以后的版本都會(huì)以最高版本IE來(lái)渲染頁(yè)面。 <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使用最新的引擎渲染網(wǎng)頁(yè)，chrome=1則可以激活Chrome Frame.

個(gè)人覺(jué)得本文很有意義，對(duì)于ie一直存在的兼容問(wèn)題給予一個(gè)解決辦法，可以考慮在工作中使用。

以下是正文，為方便oser閱讀，原文抄錄如下，有關(guān)具體情況請(qǐng)參考原作者。

Google Chrome Frame，谷歌瀏覽器內(nèi)嵌框架（簡(jiǎn)稱GCF），是一個(gè)使你機(jī)器上的Internet Explorer系列瀏覽器鳥(niǎo)槍換炮，用上webkit內(nèi)核的Chrome引擎，但I(xiàn)E瀏覽器外觀上還是IE的外觀的免費(fèi)插件。

不相信嗎？使用用IE瀏覽器打開(kāi)GCF安裝頁(yè)，按照提示安裝后，重啟IE，再打開(kāi)gcf:about:version，現(xiàn)在你會(huì)看到chrome瀏覽器的內(nèi)核信息，說(shuō)明Chrome內(nèi)核已經(jīng)植根于你的IE瀏覽器上了。

但并非你的IE訪問(wèn)任意網(wǎng)頁(yè)就會(huì)自動(dòng)的使用Chrome內(nèi)核來(lái)解析，需要兩種方式：一是在網(wǎng)址前面加上”gcf:“，比如gcf:http://gmail.com來(lái)訪問(wèn)；二是在網(wǎng)頁(yè)的meta信息中加入一句：

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

這里chrome=1代表所有版本的IE瀏覽器都使用Chrome內(nèi)核解析網(wǎng)頁(yè)，chrome屬性還有其他的值，比如chrome=IE7，代表IE7或以下版本的瀏覽器才使用chrome內(nèi)核，chrome=IE6和chrome=IE8等依此類推。

作為一個(gè)網(wǎng)頁(yè)開(kāi)發(fā)者，你會(huì)不會(huì)想到有了這個(gè)插件，以后就可以大膽使用各種CSS3樣式，只要Chrome下顯示正確，IE下也能顯示正確了！沒(méi)錯(cuò)！但前提是用戶會(huì)安裝這個(gè)插件嗎？如何提供一個(gè)友好的引導(dǎo)安裝界面呢，Google幫我們解決了這個(gè)問(wèn)題。

<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標(biāo)簽中加入這段js代碼，可以使得IE打開(kāi)該網(wǎng)頁(yè)時(shí)出現(xiàn)友好的GCF安裝引導(dǎo)iframe框。這段代碼不需要存在于

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

之中，js中已經(jīng)做了瀏覽器的判斷。

CFInstall.min.js是官方提供的文件，CFInstall.check()方法有許多可選項(xiàng)，其中包括：

• mode: “inline”?默認(rèn)值，GCF安裝引導(dǎo)的iframe結(jié)構(gòu)將存在于node選項(xiàng)指定id的元素中最前面位置，屬于文檔流的一部分
• mode: “overlay”?該iframe以彈出層顯示，彈出層將會(huì)在頁(yè)面可視范圍內(nèi)居中
• mode: “popup”?該iframe以新開(kāi)窗口/選項(xiàng)卡顯示，類似于target:_blank的效果
• node: “”?指定iframe結(jié)構(gòu)的dom結(jié)點(diǎn)位置，在mode:”inline”下有效
• url: “”?點(diǎn)擊安裝按鈕跳轉(zhuǎn)到的鏈接地址，默認(rèn)為GCF安裝文件地址
• destination: “”?GCF安裝完成后頁(yè)面跳轉(zhuǎn)到的鏈接地址
• className: “”?在mode:”inline”下對(duì)iframe指定新的class名，美化iframe界面時(shí)很有用，默認(rèn)的class為chromeFrameInstallDefaultStyle

OK，了解了這么多，相信你已經(jīng)躍躍欲試了，我在我的博客上開(kāi)啟了chrome=IE8并加上了GCF的友好安裝指引，歡迎訪問(wèn)比較IE下和Chrome下的渲染差異。

更多GCF的參考資料：

• 官方開(kāi)發(fā)者文檔：http://www.chromium.org/developers/how-tos/chrome-frame-getting-started
• html5rocks的補(bǔ)充介紹：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

文章乃參考、轉(zhuǎn)載其他博客所得，僅供自己學(xué)習(xí)作筆記使用！！！

總結(jié)

以上是生活随笔為你收集整理的使用Chrome Frame，彻底解决浏览器兼容问题的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。