兼容IE8
由于IE8不支持HTML5,而它又是Win7的默认浏览器,我们即使讨厌它,在这几年却也拿它没办法。
最近做了个需要兼容IE8的项目,不可避免地用了HTML5+CSS3,甚至canvas和svg,做兼容工作的时候不仅叫苦不迭。一个项目下来后,倒是收集了一些志于让HTML5兼容IE8的库,还有一些零散的代码和优雅降级的技巧,整理如下。IE8的兼容工作是个大活,这篇文章还不完整,肯定有很多疏漏和不足,望读者能在评论区指正,同时我也会在之后的项目中逐渐丰富这篇文章。
一、HTML5标签兼容方案:html5shiv.js
GitHub地址:https://github.com/aFarkas/html5shiv/
IE8不支持HTML5的新标签,如<header>、<nav>等标签在IE8无法渲染。html5shiv.js可帮助IE6-8浏览器兼容HTML5语义化标签。
使用方法:在页面中引用html5shiv.js文件。必须添加在页面的<head>元素内,因为IE浏览器必须在元素解析前知道这个元素,所以这个js文件不能在页面底部引用。
二、CSS3媒体查询兼容方案:Respond.js
GitHub地址:https://github.com/scottjehl/Respond
IE8不支持CSS媒体查询,对响应式设计大大不利。Respond.js可帮助IE6-8兼容“min/max-width”媒体查询条件。
使用方法:在页面中所有css文件的引用位置之后引用Respond.js。而且Respond.js的引用得越早,用户看到页面闪烁的机会越小。
三、CSS3字体单位“rem”兼容方案:rem.js
GitHub地址:https://github.com/chuckcarpenter/REM-unit-polyfill
CSS3引入了新的字体大小单位rem,与em的“相对于其父元素来设置字体大小”的功能不同,rem是相对于根元素<html>的字体大小比率单位,成了目前主流的单位之一。IE9+开始支持,IE8就只能通过引入js库来支持了。
使用方法:在页面中引用rem.js文件。需要引用在页脚,也就是<body>末尾,在所有css文件引用和DOM元素之后。
四、CSS3“background-size”属性的“cover”和“contain”属性值兼容方案:background-size polyfill
GitHub地址:https://github.com/louisremi/background-size-polyfill
“background-size”是CSS3新引入的属性,其中有两个属性值非常常用,分别为“cover”和“contain”。“cover”可以把背景图像扩展至足够大,以使背景图像完全覆盖背景区域,背景图像的某些部分也许无法显示在背景定位区域中。“contain”可以把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。IE8同样不支持,非常不方便。这时可以引用“background-size polyfill”库来兼容。
使用方法:与以上几个库不同,“background-size polyfill”的代码文件需要在css中引用。在所有用到这两个“background-size”属性值的地方,加一行“-ms-behavior”属性:
.selector {
background-size: cover;
/* 以下相对路径是相对于文档,而非css文件! */
/* 使用绝对路径可以避免混淆 */
-ms-behavior: url(/backgroundsize.min.htc);
}
五、JS数组的forEach方法兼容方案:自行实现
IE8的数组对象没有forEach方法,晕。所以自行声明即可,代码如下:
if ( !Array.prototype.forEach ) {
Array.prototype.forEach = function forEach( callback, thisArg ) {
var T, k;
if ( this == null ) {
throw new TypeError( "this is null or not defined" );
}
var O = Object(this);
var len = O.length >>> 0;
if ( typeof callback !== "function" ) {
throw new TypeError( callback + " is not a function" );
}
if ( arguments.length > 1 ) {
T = thisArg;
}
k = 0;
while( k < len ) {
var kValue;
if ( k in O ) {
kValue = O[ k ];
callback.call( T, kValue, k, O );
}
k++;
}
};
}
此外,IE8不支持的js特性不止forEach一种,等以后遇到了再作补充。
六、SVG图形兼容方案:优雅降级
参考文章:http://www.zhangxinxu.com/wordpress/2013/09/svg-fallbacks/
对于svg图形是真的无法直接兼容了,因此使用优雅降级,在IE8下显示替代的jpg、png或gif图片。有三种比较实用的方法:一是用js修改<img>的src属性,这里省略;二是用HTML的hack实现优雅降级,类似于如下代码:
<svg width="96" height="96">
<image xlink:href="svg.svg" src="svg.png" width="96" height="96" />
</svg>
支持<svg>标签的浏览器会显示svg.svg,老版本浏览器会无视<svg>标签,渲染<image>标签,从而显示svg.png。
此外,还有一种比较巧妙的方法:
<img src="data:image.svg" onerror="this.src='image.png'">
此法有弊端:当image.png出现问题无法载入时,会陷入死循环。
七、Canvas兼容方案:Excanvas.js
下载地址:http://code.google.com/p/explorercanvas/downloads/list
Canvas的功能非常强大,兼容IE8的工作也很繁巨。可能有很大一部分情况要用优雅降级,但是一些情况下可以使用Google出的Excanvas.js库。它是利用IE支持的VML对象来模拟Canvas的绘图的,有些情况下可用,但无法穷尽Canvas的所有功能。
使用方法:在页面中引用Excanvas.js文件,最好在<head>标签中。
具体注意事项可以参考文章:http://rockyuse.iteye.com/blog/1618298
八、Canvas+WebGL兼容方案:优雅降级
兼容IE8的更多相关文章
- 兼容IE8以下浏览器input表单属性placeholder不能智能提示功能
当前很多表单提示使用了表单属性placeholder,可这属性不兼容IE8以下的浏览器,我自己写了一个兼容处理js // 兼容IE8以下浏览器input不能智能提示功能 if(navigator.ap ...
- 如何使用videojs兼容IE8浏览器
需要在服务器下运行 首先我们需要下载videojs包 https://github.com/videojs/video.js/releases 这里简单写了一个小栗子 <!DOCTYPE htm ...
- jQuery validate兼容IE8写法
最近做项目的时候遇到一个validate插件在IE8下面点击submit按钮没有执行检查的BUG 在chrome和FF,还有IE9以上都可以.百度了好多文章都没有找到解决方法,后面自己测试找到了问题. ...
- 兼容ie8 rgba()用法
今天遇到了一个问题,要在一个页面中设置一个半透明的白色div.这个貌似不是难题,只需要给这个div设置如下的属性即可: background: rgba(255,255,255,.1); 但是要兼容到 ...
- 【转】让Bootstrap 3兼容IE8浏览器
FROM : http://www.ijophy.com/2014/05/bootstrap3-compatible-with-ie8.html 最近在研究Bootstrap(官方,Github)这个 ...
- 让Bootstrap 3兼容IE8浏览器
最近在研究Bootstrap(官方,Github)这个优秀的前端框架,Bootstrap最开始是Twitter团队内部的一个前端框架,所谓前端框架就是一个CSS/HTML框架,框架里面有下拉菜单.按钮 ...
- css样式设置图片半透明度,兼容IE8,火狐
关于背景颜色透明的兼容浏览器的问题,一直是个问题,我所写的兼容IE8,和火狐,说是兼容所有浏览器我就没有测试,有兴趣的朋友可以自己测试下吧. background-color:white;filter ...
- 兼容ie8 rgba()用法 滤镜filter的用法
原文 http://blog.csdn.net/westernranger/article/details/40836861 今天遇到了一个问题,要在一个页面中设置一个半透明的白色div.这个貌似不 ...
- bootstrap3 兼容IE8浏览器
近期在使用bootstrap这个优秀的前端框架,这个框架非常强大,框架里面有下拉菜单.按钮组.按钮下拉菜单.导航.导航条.面包屑.分页.排版.缩略图.警告对话框.进度条.媒体对象等,bootstrap ...
- Bootstrap 3兼容IE8浏览器(转)
Bootstrap是一个响应式的布局,你可以在宽屏电脑.普通电脑,平板电脑,手机上都得到非常优秀的布局体验.这种响应式的布局正是通过CSS3的媒体查询(Media Query)功能实现的,根据不同的分 ...
随机推荐
- 动态替换Linux核心函数的原理和实现
转载:https://www.ibm.com/developerworks/cn/linux/l-knldebug/ 动态替换Linux核心函数的原理和实现 在调试Linux核心模块时,有时需要能够实 ...
- nvidia tk1使用记录--基本环境搭建
前言 项目最开始是在X86+Nvidia(ubuntu+opencv+cuda)平台上实现,达到了期望性能,最近考虑将其移植到嵌入式平台,特别是最近nvidia出了tegra X1,基于和我们使用的g ...
- [Linux]Linux printf 输出重定向【转】
转自:http://www.cnblogs.com/aaronLinux/p/6765145.html?utm_source=itdadao&utm_medium=referral 方法一 # ...
- 【学习笔记】动态树Link-Cut-Tree
这是两个月前写的,看能不能搬运过来…… 动态树是一类维护森林连通性的问题(已纠正,感谢ZQC巨佬),目前最(wo)常(zhi)见(hui)的动态树就是LCT(Link-Cut-Tree),然而LCT似 ...
- 微信小程序滚动条返回顶部
scroll-view(可滚动视图区域): 使用竖向滚动时,需要给<scroll-view/>一个固定高度,通过 WXSS 设置 height,将scroll-y属性设置为true,将en ...
- java中的逻辑运算符,以及&与&&的区别,|与||的区别
原创,转载请留言联系 逻辑运算符: & 与 false&true=false:true&true=true:false&false=false 必须两个都是true才返 ...
- HDU-5317
RGCDQ Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Total Submi ...
- 当你用element-ui遇到需要在el-table-column上v-for时,这篇文章你能用的上,也就是你需要二级循环
好链接就要丢过去 https://blog.csdn.net/qq_28929589/article/details/79445354
- 使用dpkg命令卸载已经安装的软件包
如何在Ubuntu中使用dpkg命令卸载软件 http://jingyan.baidu.com/article/f54ae2fc2724a71e92b849c4.html sudo dpkg -i x ...
- office2007/2010/2013输入公式的正确方式
博客中的文章均为 meelo 原创,请务必以链接形式注明本文地址 理工科的学生,写报告.写论文那面需要输入公式,过去大家常用的公式编辑器是mathtype,虽然功能强大,但输入极为不方便,输入个指数. ...