常见IE8兼容性问题及解决
1、css3媒体查询
IE8不支持媒体查询
解决:respond.js,在页面中所有css文件的引用位置之后引用Respond.js
2、HTML5新标签
IE8不支持H5新标签
解决:html5shiv.js,在页面中引用html5shiv.js文件。必须添加在页面的<head>元素内,因为IE浏览器必须在元素解析前知道这个元素,所以这个js文件不能在页面底部引用。
3、rem不兼容
rem是相对于根元素<html>的字体大小比率单位,成了目前主流的单位之一。IE9+开始支持,IE8就只能通过引入js库来支持了
解决:在页面中引用rem.js文件。需要引用在页脚,也就是<body>末尾,在所有css文件引用和DOM元素之后
4、css3的background-size的cover和contain
backgroun-size的cover和contain是css3新引入的属性,IE8不支持
解决:引用“background-size polyfill”库来兼容,“background-size polyfill”的代码文件需要在css中引用。在所有用到这两个“background-size”属性值的地方,加一行“-ms-behavior”属性
.selector {
background-size: cover;
/* 以下相对路径是相对于文档,而非css文件! */
/* 使用绝对路径可以避免混淆 */
-ms-behavior: url(/backgroundsize.min.htc);
}
5、placeholder
placeholder是h5的属性,ie8不支持
解决:jquery-placeholder
6、last-child
last-child是css3选择器,ie8不支持
解决:不使用last-child,而是给最后一个元素设置一个.last的class,然后对此进行样式设置,这样就全部兼容了
7、数组的forEach方法
ie8的数组对象不支持forEach方法
解决:自己实现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兼容性问题及解决的更多相关文章
- IE6 7下常见CSS兼容性处理
以下是一些比较常见的IE6 7下的兼容性问题. 在当下这个时代,其实我们几乎可以不用再去针对IE6做兼容性的处理,除非你的公司还是诡异的要求你兼容到IE6.但是了解一些常见的兼容性问题还是可以帮助我们 ...
- CSS- ie6,ie7,ie8 兼容性写法,CSS hack写法
css ie6,ie7,ie8 兼容性写法,CSS hack写法 margin-bottom:40px; /*ff的属性*/margin-bottom:140px\9; /* IE6 ...
- ie6,ie7,ie8 css bug兼容解决记录
ie6,ie7,ie8 css bug兼容解决记录 转载自:ie6,ie7,ie8 css bug兼容解决记录 - 前端开发 断断续续的在开发过程中收集了好多的bug以及其解决的办法,都在这个文章里面 ...
- ie6对hover兼容性问题的解决:
ie6对hover兼容性问题的解决: 1,在body里添加以下样式: behavior:url(../scripts/csshover.htc); csshover.htc可直接在网上下载 2,js解 ...
- 分享.net常见的内存泄露及解决方法
分享.net常见的内存泄露及解决方法 关于内存泄漏的问题,之前也为大家介绍过,比如:<C++中内存泄漏的检测方法介绍>,是关于C++内存泄漏的.今天为大家介绍的是关于.NET内存泄漏的问题 ...
- bootstrap IE8 兼容性处理
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...
- Aasible中cryptography兼容性报错解决办法
Aasible中cryptography兼容性报错解决办法 1 Ansible中使用ansible --version查看版本,报错信息如下: ERROR! Unexpected Exception, ...
- Nginx常见错误与问题之解决方法技术指南
Nginx常见错误与问题之解决方法技术指南. 安装环境: 系统环境:redhat enterprise 6.5 64bit 1.Nginx 常见启动错误 有的时候初次安装nginx的时候会报这样的 ...
- IE浏览器和Firefox浏览器兼容性问题及解决办法
IE浏览器和Firefox浏览器兼容性问题及解决办法 为了方便大家阅读代码,以下以 IE 代替 Internet Explorer,以 MF/FF 代替 Mozzila Firefox : 1.//w ...
随机推荐
- Session和Cookie详解(1)
面试常问的有关session和cookie的问题: 1.session在分布式环境下怎么解决 2.集群下如何保证session踩中 3.cookie的大小 4.服务器怎么识别一个用户的 5.sessi ...
- 基于bootstrap的手机界面tab样式调整
这是调整后手机页面的样子(pc端的样式还是bootstrap原来的样式,没有改变的): html结构为: <div class="tab" role="tabpan ...
- redis集群搭建与管理
集群简介: Redis 集群是一个可以在多个 Redis 节点之间进行数据共享的设施(installation). Redis 集群不支持那些需要同时处理多个键的 Redis 命令, 因为执行这些命令 ...
- 使用DIDatepicker
使用DIDatepicker https://github.com/noxt/DIDatepicker 效果: #import "DIViewController.h" #impo ...
- Python初学者第六天 列表操作练习
6day 列表练习: 1.创建一个空列表,命名为names,往里面添加old_drilver,rain,jack,shanshan,peiqi,black_girl: names = [] names ...
- CSS position属性 标签: css 2016-09-06 15:58 78人阅读 评论(0) 收藏
踩了position的坑,主要是因为对position属性理解不深. 以下是w3school中对position的解释: 可能的值 值 描述 absolute 生成绝对定位的元素,相对于 static ...
- 全文检索之solr学习
solr下载: http://www.apache.org/dyn/closer.lua/lucene/solr/7.3.1 学习教程 除了官网的教程,一切教程都是可以有错误的. https://lu ...
- CSAPP buffer lab记录——IA32版本
CSAPP buffer lab为深入理解计算机系统(原书第二版)的配套的缓冲区溢出实验,该实验要求利用缓冲区溢出的原理解决5个难度递增的问题,分别为smoke(level 0).fizz(level ...
- github基本概念
github: 托管项目代码. 仓库(repository):用来存放项目的代码,每个项目对应一个仓库,多个项目则有多个仓库. 收藏(star):收藏项目的人数.收藏别人的项目方便下次查看. 复制克隆 ...
- Yii的事件和行为的区别和应用
关于 Yii 的事件和行为的描述,可参考 http://www.yiiframework.com/doc/api/1.1/CComponent 事件 事件模型就是设计模式中的“观察者模式”:当对象的状 ...