360瀏覽器下頁面樣式顯示異常的解決方法
阿新 • • 發佈：2021-01-31
1.問題描述
最近由於自己在瀏覽器使用體驗上的差異，從Chrome換為了國產的360瀏覽器。然後專案在本地開發測試的時候，完全正常；但是在打包部署到伺服器後，再用360瀏覽器訪問網頁時發現CSS錯亂， 頁面顯示異常。但在換用Chrome、Firefox、QQ瀏覽器、Edge等其他瀏覽器訪問又是正常的。
2.問題分析
其他瀏覽器能夠正常訪問頁面，說明是360瀏覽器自己的問題。後來發現我的360瀏覽器預設的採用了：相容模式，如下圖所示：
於是嘗試性的將模式切換為：極速模式 後，發現頁面重新載入，顯示正常了。並且發現其他的很多網站首次開啟都預設是極速模式，那為啥自己的專案部署後訪問預設是相容模式呢，如果使用者不瞭解瀏覽器的這些機制，使用體驗將會非常差…於是在查閱資料後發現：
國產瀏覽器大多是雙核心，甚至是三核心。一個Chromium核心，也就是Chrome使用的核心，切換到這個核心的模式一般叫極速模式；一個IE核心，稱之為IE模式；有的甚至還有一個修改過的IE核心，稱之為相容模式。
這些瀏覽器這樣做的原因是國內還有大量為IE瀏覽器量身定做的網站，為了相容這些網站，不預設啟用極速模式，而是根據程式碼判斷選擇IE模式或者相容模式或者極速模式。
問題在於，瀏覽器自動選擇經常判斷錯誤，導致本來使用Webkit可以獲得更好瀏覽效果的網站錯誤在IE模式中帶著BUG執行。讓開發者頭疼。
2.解決方法
大多數多核瀏覽器支援通過meta標籤指定瀏覽模式，所以，我們就可以通過meta程式碼強制瀏覽器啟用Chromium核心，為使用者提供最好的使用體驗。在網頁頭部標籤內新增以下程式碼：
<meta name="renderer" content="webkit"/>
<meta name="force-rendering" content="webkit"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
三個都寫上避免出現
< meta name=“renderer” content=“webkit” >不起作用的問題。
這三行程式碼分別作用於不同環境，如下所述：
<!-- 強制Chromium核心，作用於360瀏覽器、QQ瀏覽器等國產雙核瀏覽器 -->
<meta name="renderer" content="webkit"/>
<!-- 強制Chromium核心，作用於其他雙核瀏覽器 -->
<meta name="force-rendering" content="webkit"/>
<!-- 如果有安裝 Google Chrome Frame 外掛則強制為Chromium核心，否則強制本機支援的最高版本IE核心，作用於IE瀏覽器 -->
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>