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++

     }

   }

}

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

 

猜你喜欢

转载自www.cnblogs.com/xiaominsweet/p/9182173.html
今日推荐