IE低版本浏览器兼容问题

时间：2021-07-14 23:21:52
  1. head标签中填写如下代码
 <meta name="renderer" content="webkit"/>

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

 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

 <script>

 /*@cc_on

 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示例

 <!DOCTYPE html>

 <html lang="zh-CN">

 <head>

     <meta charset="UTF-8"/>

     <meta name="renderer" content="webkit"/>

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

     <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>

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

     <title>网页标题</title>

     <!-- 其他meta标签 -->

 </head>

 <body>

     <h1>网页内容</h1>

 </body>

 </html>

IE低版本浏览器兼容问题的更多相关文章

  1. HTML data属性简介以及低版本浏览器兼容算法

    实例 使用 data-* 属性来嵌入自定义数据: <ul> <li data-animal-type="bird">Owl</li> <l ...

  2. AngularJS开发指南7：AngularJS本地化，国际化，以及兼容IE低版本浏览器

    AngularJS本地化,国际化 国际化,简写为i18n,指的是使产品快速适应不同语言和文化. 本地化,简称l10n,是指使产品在特定文化和语言市场中可用. 对开发者来说,国际化一个应用意味着将所有的 ...

  3. 轮播图采用js、jquery实现无缝滚动和非无缝滚动的四种案例实现，兼容ie低版本浏览器

    项目源代码下载地址:轮播图 以下为项目实现效果:(由于gif太大,所以只上传一张图片,但效果完全能实现,经测试,在ie各版本浏览器及chrome,firefox等浏览器中均能实现效果,可以实现点击切换 ...

  4. Vue2&plus;Webpack&plus;ES6 兼容低版本浏览器（IE9）解决方案

    Vue2+Webpack+ES6 兼容低版本浏览器(IE9)解决方案 解决方式:安装 "babel-polyfill" 即可. 命令:npm install --save-dev ...

  5. WebSocket兼容到低版本浏览器

    就目前而言,WebSocket是最好的Web通信解决方案了.但是IE从10才开始兼容它,对于目前大量IE8存在的市场,原生的WebSocket显然不太实用,我们需要低版本兼容的解决方案.于是我模拟We ...

  6. 使用html5兼容低版本浏览器

    因为html5 新出的一些语义化的标签,在低版本浏览器下不能识别,举个例子,比如你写了一个 header 标签中,写了一段文本,在低版本浏览器下,肯定是能看到的,但是,那是他是不认识 header标签 ...

  7. webpack 兼容低版本浏览器，转换ES6 ES7语法

    ES6,ES7真的太棒了,async +await+Promise,让我阅读代码的时候不用再从左拉到右了(异步太多,一层套一层真的太头痛) 但是有个问题,打包后低版本浏览器运行不了,还有我用了一些混淆 ...

  8. 低版本浏览器支持HTML5标签的方法

    最近刷了一道面试题,是关于低版本浏览器支持HTM5标签的写法,在网上找了一些,都行之有效,但是缺少整体总结,所以在这里总结一下,方便其他人过来阅读. IE低版本需要支持HTML5标签: 方法1.传统引 ...

  9. jQuery效果之封装模拟placeholder效果，让低版本浏览器也支持

    页面中的输入框默认的提示文字一般使用placeholder属性就可以了,即: <input type="text" name="username" pla ...

随机推荐

  1. 设计模式-策略模式（Strategy Model）

    1.概述     在开发过程中常常会遇到类似问题,实现一个功能的时候往往有多种算法/方法(策略),我们可以根据环境的不同来使用不同的算法或策略来实现这一功能.     如在人物比较排序的实现中,我们有 ...

  2. C&sol;C&plus;&plus;头文件区别

    在从C迁移到C++时,引用的头文件经常忘记是C的还是C++特有的 1. *.h   limits.h ctype.h 2. c* climits cctype [结尾不含.h] 3. 其余的都属于C+ ...

  3. 利用 spring bean 的属性 init-method 解决因为数据库连接没有初始化而导致首次点击页面超慢的问题

    问题的描述: 一个项目,涉及到了 两个数据源,分别使用的是 两个不同的 数据库连接池,其中一个是 poxool 连接池,问题在于,spring在启动时,只初始化其中的一个 数据库连接池中的数据库连接, ...

  4. Android ViewPager轮播图

    Android客户端开发中很多时候需要用到轮播图的方式进行重点新闻的推送或者欢迎页面的制作,下面这个轮播图效果的Deamo来自互联网再经过修改而成. 1.布局文件activity_main.xml中添 ...

  5. Adjacent Bit Counts（动态规划 三维的）

    /** 题意: 给出一个01串 按照题目要求可以求出Fun(X)的值 比如: 111 Fun(111)的值是2: 输入: t (t组测试数据) n k (有n位01串 Fun()的值为K) 输出:有多 ...

  6. Python3&period;5&colon;装饰器的使用

    在Python里面函数也是一个对象,而且函数对象可以被赋值给变量,所以,通过变量也能调用该函数,简单来说函数也是变量也可以作文函数的参数 >>> def funA(): ... pr ...

  7. 64位ubuntu16&period;04系统安装tensorflow&lowbar;cpu

    ubuntu16.04安装tensorflow_cpu 一.安装anaconda: ①.下载anaconda包:Anaconda3-5.2.0-Linux-x86_64.sh 这是python3.6. ...

  8. &lbrack;Python设计模式&rsqb; 第17章 程序中的翻译官——适配器模式

    github地址:https://github.com/cheesezh/python_design_patterns 适配器模式 适配器模式,将一个类的接口转换成客户希望的另外一个接口.Adapte ...

  9. aes 和 Md5 分析

    高级加密标准(英语:Advanced Encryption Standard,缩写:AES). 密码的设计力求满足以下3条标准: ① 抵抗所有已知的攻击. ② 在多个平台上速度快,编码紧凑. ③ 设计 ...

  10. ：hover在ios无效问题

    :hover 设置的样式在ios显示不出来,需要在按钮元素或body/html上绑定一个touchstart事件才能激活:active状态. 解决方案: 方案1 js绑定: document.body ...

相关文章