meta http-equiv="X-UA-Compatible" content="IE=edge"詳解


meta http-equiv="X-UA-Compatible" content="IE=edge"詳解

 

這句話其實是指定瀏覽器按某種方式渲染,Compatible是“兼容的”意思

 http-equiv="X-UA-Compatible" 這是一個文檔兼容模式的定義

       Edge模式告訴IE以最高級 模式渲染文檔,也就是任何IE版本都以當前版本所支持的最高級標准模式渲染,避免版本升級造成的影響。

       之前在開發項目的過程中,遇到過因為IE版本產生的兼容問題。自己寫完項目在各個瀏覽器檢查時,並沒有問題,當項目給到后台同事的時候,在他們的電腦上用360瀏覽器兼容模式打開項目,出現不兼容的問題。絞盡腦汁無從下手,不知道問題的根源是什么。同事的電腦和 我的電腦安裝的同樣都是同一版本的360瀏覽器。最后,經過查閱資料發現,360兼容模式出現的兼容問題,實質還是IE的兼容問題,同時,每個電腦內置的IE版本是不一樣的,我的電腦內置IE的版本高,而同事的版本低導致出現渲染頁面時出現問題。

  找到問題的根源后解決問題並不難,只需要在頭部加上以下代碼:

<meta http-equiv="x-UA-Compatible" content="IE=Edge">

  這句代碼可以改變360兼容模式下以何種版本的IE去渲染頁面。

 

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

<span style="color:#000000"><meta http-equiv="X-UA-Compatible" content="IE=7" /></span>

        這樣我們才能使得頁面在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。

這意味着,會強制瀏覽器按照最新的標准去渲染。就像在Google’s CDN使用最新版本的JQuery一樣,這是按照最新版本,但也可能由於沒有固定的版本而破壞你的布局。

 

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 http-equiv="X-UA-Compatible" content="IE=edge"></meta>

(即如上meta加在其它meta之前)

如下所示:

<span style="color:#000000"><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></span>

 

2.選擇“工具”菜單欄,點擊“兼容性視圖設置(B)”

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

 

 

 


免責聲明!

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



猜您在找 詳解"> 詳解 X-UA-Compatible的解釋"> IE 8兼容: X-UA-Compatible的解釋 "> HTML中添加 "> 的意義"> < meta http-equiv = "X-UA-Compatible" content = "IE=edge,chrome=1" />的意義 "> 優先使用最新版本的IE 和 Chrome 內核 1 詳解"> 詳解 meta中X-UA-Compatible的作用詳解 "> Meta http-equiv屬性詳解
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM