【轉】使用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