meta中的http-equiv = "X-UA-Compatible"

       今天看到<meta http-equiv = "X-UA-Compatible" content="ie=edge">這個標籤感到很困惑,按捺不住好奇心去查了下,總結了幾篇講的比較好的文章,寫下一些感悟。

百度經驗:https://jingyan.baidu.com/article/bea41d43a40910b4c51be60a.html ;

長江之友博客文:https://blog.csdn.net/changjiangbuxi/article/details/26054755

首先我們解釋一下這條語句:

    http-equiv = "X-UA-Compatible":

    這個是針對ie8以上瀏覽器的一個屬性,ie8一下無法識別。就是說ie8以上瀏覽器遇到這個屬性會執行content的描述,大小寫不敏感。

    ie=edge:

    ie瀏覽器將執行當前支持的最高版本,大小寫不敏感,例如:

<meta http-equiv="X-UA-Compatible" content="IE=5" />
所有版本都使用ie5的文檔模式(ie5/ie6 使用的是quirks mode,譯作“怪異模式”)

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

<meta http-equiv="X-UA-Compatible" content="IE=8" />
由於本身 X-UA-Compatible 文件頭只有IE8 以上版本才能識別,因此等同於冗餘代碼

<meta http-equiv="X-UA-Compatible" content="IE=edge" />
以最高級別的可用模式顯示內容,ie7支持最高ie7,ie8支持最高ie8,它也支持8以下的,但以最高支持的模式使用,往上類似。

還有一些特殊寫法:

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

    如果安裝了 Google Chrome Frame (谷歌瀏覽器內嵌框架)則使用谷歌瀏覽器內核模式,否則使用最新的IE模式。

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

    如果不指定ie=edge時,當用戶瀏覽器沒有chrome內核時,會彈出提示框,提醒用戶安裝該內核。

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

    首先我們認識一個單詞(我不認識……),emulate : 模擬,模仿。

    如果不使用emulate,不論是否有!DOCTYPE,都將以標準模式ie8渲染,如果時ie5/ie6的話則不生效,因爲無法模擬高版本的模式。

如果你的網頁開頭帶有 <!DOCTYPE> 標記,則模擬 IE8, 等同於:

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

如果你的網頁開頭沒有 <!DOCTYPE> 標記,則模擬 IE6, 等同於:

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

版本升級提示:

實際上,由於 IE11 以下版本都已經停止更新,絕大部分前端開源項目都已經不再兼容 IE11 以下的舊版IE。往下兼容到 IE8 版本的網站已經寥寥無幾,兼容 IE7/IE6 更是近乎絕跡。

但是,即使每天只有稀稀拉拉幾個舊版IE用戶訪問網站,我們也不應該讓他看到一屏亂碼。面對依然使用舊版IE的用戶,我們可以友好地提示其升級瀏覽器後再訪問。

通過以下代碼,當用戶使用已經停止更新的IE10或舊版IE訪問網站將會自動跳轉到瀏覽器升級頁:

<script>
/*@cc_on
window.location.href="http://support.dmeng.net/upgrade-your-browser.html?referrer="+encodeURIComponent(window.location.href); @*/
</script>

@cc_on 是 IE10 及更舊版IE特有的條件編譯語句,因此可以用來判斷是否除 IE11 的其他IE版本 ,

[if ie8]:只有ie8能識別,例如:

<!--[if IE 8]><script>一些代碼</script><![endif]-->;

[if ite ie8]:ie8及其以下,例如:

<!--[if lte IE 8]><script>一些代碼</script><![endif]-->;

但是ie10及以上版本不再支持if ie判斷,所以對於想要更新到ie11的提示判斷都可以用 @cc_on。

雙核瀏覽器的兼容:

國產瀏覽器大多帶有 Chromium 內核和 IE 內核,在用戶訪問網頁時雙核瀏覽器根據網頁內容自動選擇內核。不過,雙核瀏覽器也提供了類似 X-UA-Compatible 特性的 meta 標記,允許網頁開發者通過標記選擇內核。

一、使用 Chromium 內核(極速模式)

<meta name="renderer" content="webkit"/>

二、使用 IE 8/9/10/10 內核(IE標準模式,部分支持 HTML5)

<meta name="renderer" content="ie-stand"/>

三、使用 IE 6/7 內核(IE兼容模式,不支持 HTML5)

<meta name="renderer" content="ie-comp"/>

如果網站採用最新CSS3/HTML5編寫,那麼,我們應該令其使用 Chromium 內核(也就是 Webkit 內核)渲染。

代碼如下:

<meta name="renderer" content="webkit"/>

<meta name="force-rendering" content="webkit"/>

第一行作用於360瀏覽器、QQ瀏覽器等國產雙核瀏覽器,第二行作用於其他雙核瀏覽器。

如果網站在 IE 瀏覽器效果更好,那麼,我們可以要求其使用IE標準內核渲染。

代碼如下:

<meta name="renderer" content="ie-stand"/>

如有錯誤的地方歡迎指出,共同分享。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章