IE8兼容性问题的解决方案

前几天,面试到Ie8的一些兼容问题,傻眼了,回想自己做了将近2年的移动端项目,ie兼容似乎没怎么做过。所以私下便开始找找ie兼容的视频或者文章学习,唉,还是不买书了,家里那么多书,都没看过呢,好了,开始发一波福利:

一、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不支持css3媒体查询,对响应式布局大大不利,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

具体使用方法,一看便知

 

五、JS数组的forEach方法兼容方案:自行实现

IE8的数组对象没有forEach方法,所以自行声明即可,代码如下:

 

 

if ( !Array.prototype.forEach) {

  Array.prototype.forEach = function froEach (callback, thisArg) {

      if (this == null) {

         throw new TypeError("this is null or not defined")

     }

     let o = Object(this)

     let len = o.length >>> 0 (无符号右移0位)

     if ( typeof callback !== 'function') {

       throw new TypeError( callback + " is  not a function") 

     }

     let k = 0, t;

     if ( argument.length > 1 ) {

        t = thisArg

     }

     while (k < len) {

          let kValue;

          if ( k in o) {

             kValue = o[k]

             callback.call(T, kValue, k , o)

          }

          k++

     }

   }

}

目前先写一个,日后再做补充

 

转载于:https://www.cnblogs.com/xiaominsweet/p/9182173.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/353484.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

jenkins部署_Jenkins:部署JEE工件

jenkins部署随着持续集成和持续交付的出现 &#xff0c;我们的构建被分为不同的步骤&#xff0c;以创建部署管道。 这些步骤中的一些步骤可以是例如编译和运行快速测试&#xff0c;运行慢速测试&#xff0c;运行自动验收测试或发布应用程序等。 部署流程的最后步骤意味着将我们…

2013年3月编程语言排行榜:有毒的Java

2013年3月12日&#xff0c;Tiobe公布了新一期编程语言排行榜。Java依旧是占据第一的位置&#xff0c;C语言紧随其后。值得注意的Objective-C持续发力&#xff0c;已经占到了第三的位置。咋一看榜单&#xff0c;前5条中C#下滑最快&#xff0c;从第3名下降到第五名。而其他语言都…

MATLAB各种判断

1. isempty();%判断是否为空2. isnan();%判断是否为NaN3. iscell();%判断是否为元胞数组4. ischar();%判断是否为字符数组5. ismatrix();%判断是否为矩阵6. isrow();%Determine whether input is row vector7. ismember();

js 自定义类Android吐司提示框

(function(){var mouseX 0;var mouseY 0;//定义一个全局toaslist用来存在新建的吐司var toastLsit [];window.Toast function(content,duration,positon){return new Toast(content,duration,positon);}function Toast(content,duration,positon){//显示的内容this.content…

学习Lucene

我目前正在与一个团队合作&#xff0c;开始一个基于Lucene的新项目。 虽然大多数时候我会争论使用Solr还是Elasticsearch而不是简单的Lucene&#xff0c;但这是一个有意识的决定。 在这篇文章中&#xff0c;我正在整理一些学习Lucene的资源–希望您对他们有所帮助&#xff0c;或…

MATLAB递归程序的调试方法

MATLAB具有和VC类似的调试功能&#xff0c;各功能的按钮图标和VC也很相似&#xff0c;基本可以使用VC的调试思想。MATLAB自己的特点&#xff1a;一. 查看中间变量。1. 在调试状态下&#xff0c;鼠标放在变量上就可以显示变量的基本信息。2. 在调试状态下&#xff0c;在命令行输…

DHCP服务(dhcpd)

DHCP动态分配主机地址&#xff08;Dynamic Host Configuration Protocol&#xff09; 动态主机配置协议&#xff08;DHCP&#xff09;是一种基于UDP协议且仅限于在局域网内部使用的网络协议&#xff0c;主要用于大型的局域网环境或者存在较多移动办公设备的局域网环境中&#x…

最健康的睡眠时间究竟是多少?

我每天都睡足8个小时&#xff0c;怎么还是这么困啊&#xff1f;”很多男性朋友都有这样的疑问。不是说每天8个小时的睡眠是最健康的&#xff0c;为什么那些一天睡5、6个小时的人看上去反而更生龙活虎、精力充沛呢&#xff1f; 怪8小时不如6小时的精神 睡眠不足会导致精力不济、…

Matlab Compiler路径

Matlab Compiler run-time找了半天就在自己的安装目录下D:\Program Files\MATLAB\R2011b\toolbox\compiler\deploy\win32\MCRInstaller.ex

EF context.SaveChanges()特点

EF context.SaveChanges()特点1 一次连接保存多条数据&#xff08;工作单元模式&#xff09;&#xff1b;2 内部通过事务来执行&#xff0c;如果一条数据保存失败&#xff0c;执行回滚操作&#xff1b;3 延时加载var userListfrom u in context.UserInfo select u;foreach(var …

spring aop示例_Spring Profile模式示例

spring aop示例最近&#xff0c;我们介绍了Spring Profiles的概念。 此概念是针对不同部署环境的轻松配置区分符。 直接的用例&#xff08;已提出&#xff09;是对相关的类进行注释&#xff0c;以便Spring根据活动的配置文件加载适当的类。 但是&#xff0c;这种方法可能并不…

如何提高学习效率?

学习效率 目录 介绍如何提高规律展开介绍如何提高规律展开编辑本段介绍 学习效率对中学生的重要性无须在此多言。提高孩子的学习效率是每个老师的心愿&#xff0c;更是学生及其家长的追求目标。学习兴趣、学习能力和学习效率三者是和谐统一的辩证关系&#xff0c;将这三项标准严…

基于Matlab/Simulink不平衡电网工况下级联H桥光伏并网逆变器仿真模型

本次更新的内容为级联H桥光伏并网逆变器相关的控制&#xff0c;后面会针对储能系统在级联H桥拓扑上的应用进行分享。由于传统发电造成的环境污染问题和光伏电池板价格持续创新低&#xff0c;太阳能从众多种类的可再生能源中拔地而起&#xff0c;因而光伏逆变器成为国内外学者和…

MATLAB格式化字符串

sprintf(%s City %d Quarter,str,i);

“速课小龙”项目冲刺3

第三天 日期&#xff1a;2018/6/15 一.今日完成任务情况及遇到的问题 姓名完成情况遇到的问题解决方法邓旭 通过对昨天的知识进行再学习&#xff0c;已经能进行文件上传。并且开始着手于出题模块。 今天着手只是模型的基础层搭建&#xff0c;所以难度相对较少。未有问题解决陈逸…

Java和Lagom的CQRS

我很高兴在Chicago Java User Group上进行了讨论&#xff0c;并讨论了Lagom如何实现CQRS&#xff08;命令查询责任隔离模式&#xff09;。 值得庆幸的是&#xff0c;有一个录音&#xff0c;我还把这些幻灯片发布在slideshare上 。 抽象&#xff1a; 一旦应用程序变得相当复杂…

matlab字符串处理

matlab字符串处理 %字符串处理 a= a;b=b b;c=cccc;m= length(a);%获取字符串长度 str = [str1,str2];%无缝连接两个字符串 d=strcat(a,c);%连接两个字符串,每个字符串最右边的空格被裁切 e=strvcat(a,b,m);%连接多行字符串,每行长度可不等,自动把非最长字符串最右边补空…

一天最好学习时间

一天中各个时段的学习状态k 时间状态适合做的事情 6、 7点机体休息完毕并进入如兴奋状态&#xff0c;肝脏已将体内的毒素全部排净&#xff0c;头脑清醒&#xff0c;大脑记忆力强。 第一次最佳记忆期8、9点 神经兴奋性提高&#xff0c;记忆仍保持最佳状态&#xff0c;心…

PAT 之 A+B和C

时间限制 1000 ms 内存限制 32768 KB 代码长度限制 100 KB 判断程序 Standard 题目描述 给定区间 [-2的31次方, 2的31次方] 内的3个整数 A、B 和 C&#xff0c;请判断 AB 是否大于 C。 输入描述 输入第1行给出正整数T(<10)&#xff0c;是测试用例的个数。随后给出T组测试用例…

使用Spring boot,Thymeleaf,AngularJS从零开始构建新的Web应用程序-第2部分

在本系列博客中&#xff0c;我们将使用Springboot&#xff0c;Angular等构建完整的Web应用程序。 在上一个博客中&#xff0c;我们与Thymeleaf建立了基本的登录页面。 在此博客中&#xff0c;我们将介绍bower &#xff0c;它用于管理前端依赖项&#xff0c;例如CSS&#xff0c…