詳解

時間 2020-12-30 標籤瀏覽器兼容性 X-UA-Compatible edge EmulateIE7

X-UA-Compatible是針對IE8新加的一個設置，對於IE8之外的瀏覽器是不識別的，這個區別與content="IE=7"在無論頁面是否包含<!DOCTYPE>指令，都像是使用了 Windows Internet Explorer 7的標準模式。而content="IE=EmulateIE7"模式遵循<!DOCTYPE>指令。對於多數網站來說，它是首選的兼容性模式。
爲了避免製作出的頁面在IE8下面出現錯誤，建議直接將IE8使用IE7進行渲染。也就是直接在頁面的header的meta標籤中加入如下代碼：

<meta http-equiv="X-UA-Compatible" content="IE=7" />

        這樣我們才能使得頁面在IE8裏面表現正常！
        瀏覽器市場份額的激烈競爭，給網頁設計開發人員帶來了兼容性設計的麻煩。僅IE瀏覽器就有好幾個主流版本，IE6、IE7、IE8 等等。當然使用諸如 IETester，多版本 IE 共存解決方案之類的第三方集成工具，可以方便代碼調試。但我們總需要找尋一種更爲省時省力的方法。
        X-UA-Compatible 是針對 IE8 版本的一個特殊文件頭標記，用於爲 IE8 指定不同的頁面渲染模式。由於當下 IE6 和 IE7 使用率依然較高，綜合考慮，啓用 IE8 版本的 X-UA-Compatible 兼容模式顯得相當重要。
        各種兼容模式代碼示例如下：
1.<meta http-equiv="X-UA-Compatible" content="IE=5" />
像是使用了 Windows Internet Explorer 7 的 Quirks 模式，這與 Windows Internet Explorer 5 顯示內容的方式很相似。

2.<meta http-equiv="X-UA-Compatible" content="IE=7" />
無論頁面是否包含 <!DOCTYPE> 指令，均使用 Windows Internet Explorer 7 的標準渲染模式。

3.<meta http-equiv="X-UA-Compatible" content="IE=8" />
開啓 IE8 的標準渲染模式，但由於本身 X-UA-Compatible 文件頭僅支持 IE8 以上版本，因此等同於冗餘代碼。

4.<meta http-equiv="X-UA-Compatible" content="edge" />
Edge 模式通知 Windows Internet Explorer 以最高級別的可用模式顯示內容，這實際上破壞了「鎖定」模式。即如果你有IE9的話說明你有IE789，那麼就調用高版本的那個也就是IE9。

5.<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" >

如果IE有安裝Google Chrome Frame，那麼就走安裝的組件，如果沒有就和<meta http-equiv="X-UA-Compatible" content="edge" />一樣。

說明：針對IE 6，7，8等版本的瀏覽器插件Google Chrome Frame，可以讓用戶的瀏覽器外觀依然是IE的菜單和界面，但用戶在瀏覽網頁時，實際上使用的是Google Chrome瀏覽器內核。

6.<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
EmulateIE7 模式通知 Windows Internet Explorer 使用 <!DOCTYPE> 指令確定如何呈現內容。標準模式指令以Windows Internet Explorer 7 標準模式顯示，而 Quirks 模式指令以 IE5 模式顯示。與 IE7 模式不同，EmulateIE7 模式遵循 <!DOCTYPE> 指令。對於多數網站來說，它是首選的兼容性模式。

目前，在開發AngularJS項目時（只支持IE8及以上版本或chrome/firefox），而有些同事IE8登錄卻還提示「請使用IE8及以上版本或chrome/firefox，如果您使用IE8，請在」工具」菜單中，調整爲非」兼容性視圖」！

解決方法：

1.將項目中的.html及.jsp文件的<head>的最前面加上

（即如上meta加在其它meta之前）

如下所示：

<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"></meta>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="pragma" content="no-cache"/>
<meta http-equiv="cache-control" content="no-cache"/>
<meta http-equiv="expires" content="0"/>
</head>
...
</html>

2.選擇「工具」菜單欄，點擊「兼容性視圖設置(B)」

打開如下彈出框，將「在兼容性視圖中顯示Intranet站點(I)、在兼容性視圖中顯示所有網站(E)」這兩項前面的勾選框勾選掉（即不勾選上）