兼容ie8总结

最近做了个兼容ie8的项目，把遇到的一些坑总结一下，欢迎大神指正，共勉。

一. js相关

1. 关于库的引用

jquery只能引用1.x的版本，swiper只能引用2.x的版本。

2. 动态生成的dom, $().click 方法为其添加点击事件，需用on 或 live 方法进行绑定。

3. 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++;
        }
      };
    }

4. ie8不兼容indexOf, 可用如下代码兼容

if (!Array.prototype.indexOf){
          Array.prototype.indexOf = function(elt /*, from*/){
        var len = this.length >>> 0;
        var from = Number(arguments[1]) || 0;
        from = (from < 0)
             ? Math.ceil(from)
             : Math.floor(from);
        if (from < 0)
          from += len;
        for (; from < len; from++)
        {
          if (from in this &&
              this[from] === elt)
            return from;
        }
        return -1;
      };

5. 获取target 对象应该这样获取

function getTarget(event) { 
    var e = window.event||event;
    var target= e.target || e.srcElement; 
}

6. 下载文件可用如下方式下载

var $downloadFileForm = $('<form class="hidden" enctype="multipart/form-data" method="post" action="url"></form>');
      $downloadFileForm.attr({
    }).appendTo('body');
    $downloadFileForm[0].submit();
    $downloadFileForm.remove();

7. 由于ie8不兼容FormData对象，需要通过表单提交的方式上传文件, 并且使用jquery.fom.js 库的ajaxSubmit 方法提交。

8. ie8 不支持placeholder，建议自己手写一个div定位到input上进行模拟，网上搜到解决方案有时候会定位出现问题。

9. 阻止冒泡点击事件

function click(e) {
    e=window.event||e;
    if(document.all){
      e.cancelBubble=true;
    }else{
      e.stopPropagation();
    }
}

二、css 相关

1. 背景图片平铺问题，ie8 不支持background-size属性，所以需要滤镜解决

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='url', sizingMethod = 'scale');

2. 要使用css3 的相关属性，可引入ie-css3.htc 文件，引用方式如下，路径相对于html文件而不是css文件

behavior: url(ie-css3.htc);

3. ie8 不支持nth-child 伪类，可用如下方式代替，不过比较繁琐

ul:first-child + ul
ul:first-child + ul + ul + ul
ul:first-child + ul + ul + ul + ul + ul

4. ie8 不支持rgba，有半透明背景需求的可以使用opacity 代替，代码如下

opacity: 0.7;
-moz-opacity:0.7;
-khtml-opacity: 0.7;
filter:alpha(opacity=70);

先写到这里，想到了再补充。。

posted @ 2019-03-21 14:49 洛昭言阅读(499) 评论(0) 编辑收藏举报

洛昭言

兼容ie8总结

公告