本文轉自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