IE低版本浏览器兼容问题
- 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低版本浏览器兼容问题的更多相关文章
- HTML data属性简介以及低版本浏览器兼容算法
实例 使用 data-* 属性来嵌入自定义数据: <ul> <li data-animal-type="bird">Owl</li> <l ...
- AngularJS开发指南7:AngularJS本地化,国际化,以及兼容IE低版本浏览器
AngularJS本地化,国际化 国际化,简写为i18n,指的是使产品快速适应不同语言和文化. 本地化,简称l10n,是指使产品在特定文化和语言市场中可用. 对开发者来说,国际化一个应用意味着将所有的 ...
- 轮播图采用js、jquery实现无缝滚动和非无缝滚动的四种案例实现,兼容ie低版本浏览器
项目源代码下载地址:轮播图 以下为项目实现效果:(由于gif太大,所以只上传一张图片,但效果完全能实现,经测试,在ie各版本浏览器及chrome,firefox等浏览器中均能实现效果,可以实现点击切换 ...
- Vue2+Webpack+ES6 兼容低版本浏览器(IE9)解决方案
Vue2+Webpack+ES6 兼容低版本浏览器(IE9)解决方案 解决方式:安装 "babel-polyfill" 即可. 命令:npm install --save-dev ...
- WebSocket兼容到低版本浏览器
就目前而言,WebSocket是最好的Web通信解决方案了.但是IE从10才开始兼容它,对于目前大量IE8存在的市场,原生的WebSocket显然不太实用,我们需要低版本兼容的解决方案.于是我模拟We ...
- React+Webpack+ES6 兼容低版本浏览器(IE9)解决方案
虽然过了兼容IE6的噩梦时代,IE依旧阴魂不散,因为你可能还要兼容IE9.在ES6已经普及的今天,用ES6写react已经成了标配.但是babel编译的js语法,由于某些不规范的写法,可能在IE9下不 ...
- 使用html5兼容低版本浏览器
因为html5 新出的一些语义化的标签,在低版本浏览器下不能识别,举个例子,比如你写了一个 header 标签中,写了一段文本,在低版本浏览器下,肯定是能看到的,但是,那是他是不认识 header标签 ...
- webpack 兼容低版本浏览器,转换ES6 ES7语法
ES6,ES7真的太棒了,async +await+Promise,让我阅读代码的时候不用再从左拉到右了(异步太多,一层套一层真的太头痛) 但是有个问题,打包后低版本浏览器运行不了,还有我用了一些混淆 ...
- 低版本浏览器支持HTML5标签的方法
最近刷了一道面试题,是关于低版本浏览器支持HTM5标签的写法,在网上找了一些,都行之有效,但是缺少整体总结,所以在这里总结一下,方便其他人过来阅读. IE低版本需要支持HTML5标签: 方法1.传统引 ...
随机推荐
- 【EasyUI学习-3】Easyui tabs入门实践
作者:ssslinppp 1. 摘要 一般我们在设计程序主框架的时候,当点击(子)菜单时,希望相应界面都在tabs页中显示: 在显示的时候,如果之前打开过该界面,则希望重新选中对应的tab ...
- java正则表达式学习
1.简单认识正则: public class Test { public static void main(String[] args) { //简单认识正则 p("abc".ma ...
- 汇编,浮点运算符,fldpi,fmul等指令说明.
协处理器指令系统 协处理器共有68条不同的指令,汇编程序在遇到协处理器指令助记符时,都会将其转换成机器语言的ESC指令,ESC指令代表了协处理器的操作码. 协处理器指令在执行过程中,需要访问内存单元时 ...
- css属性所对应js属性
document.getElementById("xx").style.xxx中的所有属性是什么,css对应js: 盒子标签和属性对照 CSS语法(不区分大小写) JavaScri ...
- windows,linux下SVN实现自动更新WEB目录
通过SVN进行版本库管理,每次提交后,都要在SVN服务器更新最新上传的版本到WEB目录进行同步.操作比较烦琐,而且效率也低.使用SVN钩子脚本进行WEB目录同步,可很好的解决这方面的问题.由于测试机器 ...
- Ubuntu-14.04.1 desktop安装时及安装后遇到的小问题
ubuntu安装时,进入桌面就黑屏:ctrl+alt+F1进入终端1,输入:startx,此时桌面会重新出现,快速修改桌面的分辨率即可.没有及时修改可以重复上面操作. su root认证失败:sudo ...
- 那些你希望N年前就掌握的命令
这篇文章转载自黑客志,短短的一篇文章我找到了3个对我非常有用的技巧,在信息爆炸的今天,简直就跟捡宝似的,希望这些命令对你也有帮助. 有人在Reddit上发帖询问:有没有哪条命令是你希望自己在几年前就掌 ...
- Data Provider 中没有.net framework Data provider for Mysql 的解决方法
近来做的一个项目中,数据库用的是 MySql, 而在项目使用 Entity Data Model 来做数据服务层,可是在项目中添加 Data Entty Model 时,一般我们都会选择从数据库中直接 ...
- ldap快速配置
1.[yum lamp环境] yum -y install httpd httpd-devel mysql mysql-server mysql-devel php php-mysql php-co ...
- OpenACC 计算规约时发现的小坑
▶ 使用 OpenACC 的 parallel 构件来计算规约,主要想说的是 win10 pgi 和 win10 WSL pgi 结果的不同和关于 for 循环的一个小坑 ● 正常的代码 #inclu ...