文档章节

兼容ie8总结

o
 osc_a22drz29
发布于 2019/03/21 14:49
字数 551
阅读 7
收藏 0

精选30+云产品,助力企业轻松上云!>>>

 最近做了个兼容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);

 

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

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

hbase2.1.9 centos7 完全分布式 搭建随记

hbase2.1.9 centos7 完全分布式 搭建随记 这里是当初在三个ECS节点上搭建hadoop+zookeeper+hbase+solr的主要步骤,文章内容未经过润色,请参考的同学搭配其他博客一同使用,并记得根据实际情...

osc_4tfw1dxv
56分钟前
11
0
zookeeper3.5.5 centos7 完全分布式 搭建随记

zookeeper3.5.5 centos7 完全分布式 搭建随记 这里是当初在三个ECS节点上搭建hadoop+zookeeper+hbase+solr的主要步骤,文章内容未经过润色,请参考的同学搭配其他博客一同使用,并记得根据实...

osc_6jhxf9ab
58分钟前
19
0
steam夏日促销悄然开始,用Python爬取排行榜上的游戏打折信息

前言 很多人学习python,不知道从何学起。 很多人学习python,掌握了基本语法过后,不知道在哪里寻找案例上手。 很多已经做案例的人,却不知道如何去学习更加高深的知识。 那么针对这三类人,...

osc_ur9mmbck
59分钟前
16
0
python 里 certifi 库的作用

python 里 certifi 库的作用 安装了certifi之后,和requests库一样也有一个cacert.pem,可以用编辑器打开cacert.pem,里面包含了很多可信任知名公司的证书/公钥 库的路径,我这里是python2.7...

osc_1x6ycmfm
今天
11
0
干掉"ZooKeeper",阿里为什么不用ZK做服务发现?

  20大进阶架构专题每日送达   链接:yq.aliyun.com/articles/601745   2020年Java面试题库连载中   !   正文   站在未来的路口,回望历史的迷途,常常会很有意思,因为我们会不...

osc_q5m9dzk0
今天
17
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部