• 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>
  • 相关阅读:
    如何手动封装 $ on off emit?
    Vue 实例身上的一些方法(二)
    Vue 实例身上的一些方法(一)
    Vue属性过滤
    Vue属性监听
    Vue实现简单的商品增减功能
    Vue 计算属性
    使用Vue实现一个简单地自定义拖拽功能
    数组的深拷贝与浅拷贝
    如何让html引用公共布局(多个html文件公用一个header.html和footer.html)
  • 原文地址:https://www.cnblogs.com/cxyc/p/10592957.html
Copyright © 2020-2023  润新知