解决360等等浏览器兼容模式解析不兼容代码
? ?之前寫的代碼不是很規(guī)范 , 在今天測試下發(fā)現(xiàn)360瀏覽器等等的瀏覽器使用兼容模式會(huì)有很多不兼容 , 網(wǎng)上了解過一下 , 說是很多瀏覽器的兼容模式可能就是為了兼容IE7之前的網(wǎng)站代碼 , 而非我們字面理解的'兼容'二字 ?... ?
OK!跑題了 ...?
我的解決方案是在頁面head加<meta http-equiv="X-UA-Compatible" content="IE=11"> ?
告訴瀏覽器最少使用IE11的內(nèi)核去解析 ?能解決IE7內(nèi)核下的很多問題
再來學(xué)習(xí)一番:
?? X-UA-Compatible是針對IE8新加的一個(gè)設(shè)置,對于IE8之外的瀏覽器是不識別的,這個(gè)區(qū)別與content="IE=7"在無論頁面是否包含<!DOCTYPE>指令,都像是使用了 Windows Internet Explorer 7的標(biāo)準(zhǔn)模式。而content="IE=EmulateIE7"模式遵循<!DOCTYPE>指令。對于多數(shù)網(wǎng)站來說,它是首選的兼容性模式。
??????? 為了避免制作出的頁面在IE8下面出現(xiàn)錯(cuò)誤,建議直接將IE8使用IE7進(jìn)行渲染。也就是直接在頁面的header的meta標(biāo)簽中加入如下代碼:
??????? 這樣我們才能使得頁面在IE8里面表現(xiàn)正常!
??????? 瀏覽器市場份額的激烈競爭,給網(wǎng)頁設(shè)計(jì)開發(fā)人員帶來了兼容性設(shè)計(jì)的麻煩。僅IE瀏覽器就有好幾個(gè)主流版本,IE6、IE7、IE8 等等。當(dāng)然使用諸如 IETester,多版本 IE 共存解決方案之類的第三方集成工具,可以方便代碼調(diào)試。但我們總需要找尋一種更為省時(shí)省力的方法。
??????? X-UA-Compatible 是針對 IE8 版本的一個(gè)特殊文件頭標(biāo)記,用于為 IE8 指定不同的頁面渲染模式。由于當(dāng)下 IE6 和 IE7 使用率依然較高,綜合考慮,啟用 IE8 版本的 X-UA-Compatible 兼容模式顯得相當(dāng)重要。
??????? 各種兼容模式代碼示例如下:
1.<meta http-equiv="X-UA-Compatible" content="IE=5" />
像是使用了 Windows Internet Explorer 7 的 Quirks 模式,這與 Windows Internet Explorer 5 顯示內(nèi)容的方式很相似。
2.<meta http-equiv="X-UA-Compatible" content="IE=7" />
無論頁面是否包含 <!DOCTYPE> 指令,均使用 Windows Internet Explorer 7 的標(biāo)準(zhǔn)渲染模式。
3.<meta http-equiv="X-UA-Compatible" content="IE=8" />
開啟 IE8 的標(biāo)準(zhǔn)渲染模式,但由于本身 X-UA-Compatible 文件頭僅支持 IE8 以上版本,因此等同于冗余代碼。
4.<meta http-equiv="X-UA-Compatible" content="edge" />
Edge 模式通知 Windows Internet Explorer 以最高級別的可用模式顯示內(nèi)容,這實(shí)際上破壞了“鎖定”模式。即如果你有IE9的話說明你有IE789,那么就調(diào)用高版本的那個(gè)也就是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的菜單和界面,但用戶在瀏覽網(wǎng)頁時(shí),實(shí)際上使用的是Google Chrome瀏覽器內(nèi)核。
?
6.<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
EmulateIE7 模式通知 Windows Internet Explorer 使用 <!DOCTYPE> 指令確定如何呈現(xiàn)內(nèi)容。標(biāo)準(zhǔn)模式指令以Windows Internet Explorer 7 標(biāo)準(zhǔn)模式顯示,而 Quirks 模式指令以 IE5 模式顯示。與 IE7 模式不同,EmulateIE7 模式遵循 <!DOCTYPE> 指令。對于多數(shù)網(wǎng)站來說,它是首選的兼容性模式。
?
??????? 目前,在開發(fā)AngularJS項(xiàng)目時(shí)(只支持IE8及以上版本或chrome/firefox),而有些同事IE8登錄卻還提示“請使用IE8及以上版本或chrome/firefox,如果您使用IE8,請?jiān)凇惫ぞ摺辈藛沃?#xff0c;調(diào)整為非”兼容性視圖”!
解決方法:
1.將項(xiàng)目中的.html及.jsp文件的<head>的最前面加上
<meta http-equiv="X-UA-Compatible" content="IE=edge"></meta>
(即如上meta加在其它meta之前)
如下所示:
Html代碼??2.選擇“工具”菜單欄,點(diǎn)擊“兼容性視圖設(shè)置(B)”
????打開如下彈出框,將“在兼容性視圖中顯示Intranet站點(diǎn)(I)、在兼容性視圖中顯示所有網(wǎng)站(E)”這兩項(xiàng)前面的勾選框勾選掉(即不勾選上)
總結(jié)
以上是生活随笔為你收集整理的解决360等等浏览器兼容模式解析不兼容代码的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: HTML5事件—visibilitych
- 下一篇: HTML与CSS布局技巧总结