解決360雙核瀏覽器兼容模式的頁(yè)面顯示問(wèn)題

發(fā)布時(shí)間：2016-11-03 13:16:08 作者：佚名

當(dāng)前360瀏覽器占據(jù)的瀏覽器市場(chǎng)20%以上的份額，我們做網(wǎng)站的肯定要考慮一下兼容性，有時(shí)候chrome與ie正常，但到了360瀏覽器就不行了，可能360雙核的ie核心比較偏低版本的原因

　由于眾所周知的情況，國(guó)內(nèi)的主流瀏覽器都是雙核瀏覽器：基于Webkit內(nèi)核用于常用網(wǎng)站的高速瀏覽。基于IE的內(nèi)核用于兼容網(wǎng)銀、舊版網(wǎng)站。以360的幾款瀏覽器為例，我們優(yōu)先通過(guò)Webkit內(nèi)核渲染主流的網(wǎng)站，只有小量的網(wǎng)站通過(guò)IE內(nèi)核渲染，以保證頁(yè)面兼容。在過(guò)去很長(zhǎng)一段時(shí)間里，我們主要的控制手段是一個(gè)幾百k大小網(wǎng)址庫(kù)，一個(gè)通過(guò)長(zhǎng)期人工運(yùn)營(yíng)收集的網(wǎng)址庫(kù)。

　　盡管我們努力通過(guò)用戶反饋、代碼標(biāo)簽智能判斷技術(shù)提高瀏覽器的自動(dòng)切核準(zhǔn)確率。但是在很多情況下，我們?nèi)匀粺o(wú)法達(dá)到百份百正確。因此，我們新增加了一個(gè)控制手段：內(nèi)核控制Meta標(biāo)簽。只要你在自己的網(wǎng)站里增加一個(gè)Meta標(biāo)簽，告訴360瀏覽器這個(gè)網(wǎng)址應(yīng)該用哪個(gè)內(nèi)核渲染，哪么360瀏覽器就會(huì)在讀取到這個(gè)標(biāo)簽后，立即切換對(duì)應(yīng)的內(nèi)核。并將這個(gè)行為應(yīng)用于這個(gè)二級(jí)域名下所有網(wǎng)址。
目前該功能已經(jīng)在所有的360安全瀏覽器實(shí)現(xiàn)。我們也建議其它瀏覽器廠商一起支持這個(gè)實(shí)現(xiàn)。讓這個(gè)控制標(biāo)簽成為行業(yè)標(biāo)準(zhǔn)。

代碼示例

在head標(biāo)簽中添加一行代碼：

<html>
    <head>
        <meta name="renderer" content="webkit|ie-comp|ie-stand">
    </head>
    <body>
    </body>
</html>

content的取值為webkit,ie-comp,ie-stand之一，區(qū)分大小寫(xiě)，分別代表用webkit內(nèi)核，IE兼容內(nèi)核，IE標(biāo)準(zhǔn)內(nèi)核。
　　若頁(yè)面需默認(rèn)用極速核，增加標(biāo)簽：<meta name="renderer" content="webkit">
　　若頁(yè)面需默認(rèn)用ie兼容內(nèi)核，增加標(biāo)簽：<meta name="renderer" content="ie-comp">
　　若頁(yè)面需默認(rèn)用ie標(biāo)準(zhǔn)內(nèi)核，增加標(biāo)簽：<meta name="renderer" content="ie-stand">

　　注意：引號(hào)要英文狀態(tài)下的，直接復(fù)制代碼后看一下格式對(duì)不對(duì)，請(qǐng)自行更正。
　　各渲染內(nèi)核的技術(shù)細(xì)節(jié)

　　內(nèi)核 Webkit IE兼容 IE標(biāo)準(zhǔn)
　　文檔模式 Chrome 21 IE6/7 IE9/IE10/IE11(取決于用戶的IE)
　　HTML5支持 YES NO YES
　　ActiveX控件支持 NO YES YES

備注

這個(gè)功能其實(shí)和IE9的X-UA-Compatible很類似，關(guān)于IE幾個(gè)內(nèi)核的實(shí)現(xiàn)介紹，請(qǐng)看：
http://blogs.msdn.com/b/ie/archive/2010/06/16/ie-s-compatibility-features-for-site-developers.aspx

今天當(dāng)我嘗試一段js代碼的時(shí)候，猜測(cè)可能360兼容模式下，ie版本不是最高版本，代碼比較正，例如下面的代碼，360瀏覽器下一定要把代碼寫(xiě)到body標(biāo)簽里面。里面瀏覽器就不行

<body>
<div id="dxy"></div>
<script>
var getId=function(id){
	return "string"==typeof(id)?document.getElementById(id):id;
	}
alert("ok");
getId("dxy").innerHTML="<font color=red>腳本之家</font>";
</script>
</body>