1. 程式人生 > >解決360等等瀏覽器相容模式解析不相容程式碼

解決360等等瀏覽器相容模式解析不相容程式碼

   之前寫的程式碼不是很規範 , 在今天測試下發現360瀏覽器等等的瀏覽器使用相容模式會有很多不相容 , 網上了解過一下 , 說是很多瀏覽器的相容模式可能就是為了相容IE7之前的網站程式碼 , 而非我們字面理解的'相容'二字  ...  
OK!跑題了 ... 
我的解決方案是在頁面head加<meta http-equiv="X-UA-Compatible" content="IE=11">  
告訴瀏覽器最少使用IE11的核心去解析  能解決IE7核心下的很多問題

再來學習一番:

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

Html程式碼  收藏程式碼
  1. <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,請在”工具”選單中,調整為非”相容性檢視”!

解決方法: