IE低版本瀏覽器兼容問題


  1. head標簽中填寫如下代碼
1 <meta name="renderer" content="webkit"/>
2 <meta name="force-rendering" content="webkit"/>
3 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
4 <script>
5 /*@cc_on 
6 window.location.href="https://support.dmeng.net/upgrade-your-browser.html?referrer="+encodeURIComponent(window.location.href); @*/</script>
  • <meta name="renderer" content="webkit"/>

以上這段代碼作用於360瀏覽器、QQ瀏覽器等國產雙核瀏覽器,意思是默認優先采用極速模式,即 Chromium Webkit 內核。需要注意的是,此代碼並非總是有效,當你的域名是 gov.cn 或 edu.cn 結尾時,或當你的網頁內容存在類似“IE9.0或以上瀏覽器訪問達到最佳效果”的提示時,此代碼將失效。

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

以上這段代碼作用於其他雙核瀏覽器,意思與上一段相同。
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
以上這段代碼作用於IE瀏覽器,意思是當IE瀏覽器識別有 Google Chrome Frame 插件,則采用 Webkit 內核,否則采用最新IE內核。

2.關於條件判斷

if IE 條件注釋只支持到 IE9 ,所以如果提示升級的版本包括 IE10 需要使用JS代碼進行判斷。但由於 IE11 UA 規則已改變(特征里不帶 MSIE ),所以判斷是否 IE10 及以下只需要按這個規則進行匹配即可。以下是例子:
IE10及以下版本提示升級:
方法一,條件編譯 @cc_on 是IE10及舊版IE特有,因此可用於判斷是否除 IE11 以外的其他IE瀏覽器。推薦此方法,但需要注意,如使用自動過濾注釋,添加升級提示代碼后,要檢查確認有沒有被過濾器誤刪,如被刪可修正過濾規則或考慮使用方法二。

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

方法二,通過UA判斷。

<script>if (navigator.appVersion.match(/MSIE [0-9]+/)) window.location.href="https://support.dmeng.net/upgrade-your-browser.html?referrer="+encodeURIComponent(window.location.href); </script>

IE9 及以下版本提示升級:

<!--[if lte IE 9]><script>window.location.href="https://support.dmeng.net/upgrade-your-browser.html?referrer="+encodeURIComponent(location.href);</script><![endif]-->

IE8 及以下版本提示升級:

<!--[if lte IE 8]><script>window.location.href="https://support.dmeng.net/upgrade-your-browser.html?referrer="+encodeURIComponent(location.href);</script><![endif]-->

IE7 及以下版本提示升級:

<!--[if lte IE 7]><script>window.location.href="https://support.dmeng.net/upgrade-your-browser.html?referrer="+encodeURIComponent(location.href);</script><![endif]-->


一個完整的HTML示例

 

 1 <!DOCTYPE html>                                                          
 2 <html lang="zh-CN">                                                      
 3 <head>                                                                   
 4     <meta charset="UTF-8"/>
 5     <meta name="renderer" content="webkit"/>
 6     <meta name="force-rendering" content="webkit"/>
 7     <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
 8     <script>/*@cc_on window.location.href="https://support.dmeng.net/upgrade-your-browser.html?referrer="+encodeURIComponent(window.location.href); @*/</script>
 9     <title>網頁標題</title>
10     <!-- 其他meta標簽 -->
11 </head>
12 <body>
13     <h1>網頁內容</h1>
14 </body>
15 </html>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM