爲了幫助確保網頁在將來的 Internet Explorer 版本中具有一致的外觀,Internet Explorer 8 引入了文檔兼容性。文件兼容性用於定義IE如何渲染網頁。
怎麼查看當前網頁在IE下的兼容性模式:
在瀏覽器中按F12打開IE開發人員工具,在最上方的工具欄中可以看到瀏覽器模式和文檔模式。
- 瀏覽器模式影響瀏覽器的行爲表現以及聲明的版本號。
- 文檔模式影響DOM的轉換、渲染操作,影響的是瀏覽器的外觀表現,決定網頁顯示成什麼樣子的。
客戶端兼容性模式默認設置:
- 外網網站以標準模式來渲染
- 內網網站以兼容模式(IE7兼容模式)來渲染
- 當用IP訪問網站時,也是自動以標準模式來渲染,因爲IE不能知道ip地址是內網或者外網的
- 當訪問本地html文件時,如‘C:\Temp\MyWebPage.htm’,IE8兼容性模式默認也是關閉的
- 兼容性模式是針對域名設置的
- 啓用、關閉兼容性模式時,瀏覽器會自動重新加載(刷新)頁面(不需要瀏覽器重啓)
客戶端兼容模式設置:
兼容性模式按鈕
只有當切換到兼容性視圖有意義的情況下(譬如當前正以標準模式查看網頁),IE纔會顯示上述按鈕。其他情況下,如正以Quick模式查看頁面或者正在查看內網網頁(它們自動用兼容性模式來渲染),IE會自動隱藏這個按鈕。
Tools菜單下的兼容性視圖以及兼容性視圖設置畫面
注意:默認情況下,用兼容性模式(即IE7標準模式)查看內網網站是被選中的
服務器端兼容模式設置:
即當客戶端以兼容性模式視圖查看網頁時,可以在服務器上設置以什麼標準的兼容性模式來渲染網頁(IE8,IE9下默認啓用的是IE7標準的兼容性模式)
當客戶端以標準模式(非兼容性模式)來查看網頁時,服務器端的兼容性模式不會影響標準模式的渲染。
若你已於網站服務器指定了一個預設的文件兼容性模式,你可以在個別頁面上指定不同的文件兼容性模式來蓋過它。在網頁中指定的模式優先權高於服務器中(通過HTTP Header)所指定的模式。
兼容性模式設置優先級:
X-UA-Compatible是自從IE8新加的一個設置,對於IE8以下的瀏覽器是不識別的。通過在meta中設置X-UA-Compatible的值,可以指定網頁的兼容性模式設置。
例子:
- <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" />
IE文檔兼容性模式所有可能的值:
- Emulate IE8 mode指示IE使用<!DOCTYPE>指令來決定如何編譯內容。Standards mode指令會顯示成IE8 Standards mode而quirks mode會顯示成IE5 mode。不同於IE8 mode,Emulate IE8 mode重視<!DOCTYPE>指令。
- Emulate IE7 mode指示IE使用<!DOCTYPE>指令來決定如何編譯內容。Standards mode指令會顯示成IE7 Standards mode而quirks mode會顯示成IE5 mode。不同於IE7 mode,Emulate IE7 mode重視<!DOCTYPE>指令。對於許多網頁來說這是最推薦的兼容性模式。
- IE5 mode 編譯內容如同IE7的quirks mode之顯示狀況,和IE5中顯示的非常類似。
- IE7 mode編譯內容如同IE7的standards mode之顯示狀況,無論網頁是否含有<!DOCTYPE>指令。
- IE8 mode提供對業界標準的最高支持,包含 W3C Cascading Style Sheets Level 2.1 Specification和W3C Selectors API,並有限的支持 W3C Cascading Style Sheets Level 3 Specification (Working Draft)。
- Edge mode指示IE以目前可用的最高模式顯示內容。當使用IE8時其等同於IE8 mode。若(假定)未來放出支持更高兼容性模式的IE,使用Edge mode的頁面會使用該版本能支持的最高模式來顯示內容。同樣的那些頁面在使用IE8瀏覽時仍會照常顯示。
注意事項:
- 1,根據官網定義X-UA-compatible 標頭不區分大小寫;不過,它必須顯示在網頁中除 title 元素和其他 meta 元素以外的所有其他元素之前。如果不是的話,它不起作用
- 2,content的內容是IE=8,或者IE=edge等值,注意不是IE8或者直接寫個edge的值,否則不起作用
- <h:head>
- <f:facet name="first">
- <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
- <meta content='text/html; charset=UTF-8' http-equiv="Content-Type" />
- <title>PrimeFaces Layout</title>
- </f:facet>
- <style type="text/css">
- </style>
- </h:head>