【轉】使用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的參考資料:


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM