ie11兼容问题汇总及解决方案

最近的项目涉及ie11的兼容,简直是各种奇葩问题扑面而来。为了加强记忆或者给其他小伙伴福利,赶紧汇总记录了下来:

1.样式问题:部分属性iE不兼容,例:
  a.    white-space: nowrap :nowrap 不生效
  解决方法:添加一行样式:
word-break: keep-all

  b.    inherit 属性不生效、避免在ie中使用该属性

2.原生js部分属性不兼容,例:
includes()方法报错
解决方法:用indexOf()方法替代

 

el.indexOf()>=0  <==>  el.indexOf 返回true

3.冒泡事件,ie默认接受冒泡事件
       解决方法:阻止事件向父元素冒泡
      //如果提供了事件对象,则这是一个非IE浏览器 
      if ( e && e.stopPropagation ) 
      //因此它支持W3C的stopPropagation()方法 
      e.stopPropagation(); 
      //否则,我们需要使用IE的方式来取消事件冒泡 

 

 

      else window.event.cancelBubble = true; 

 

4.formData.set()方法不支持,其实ie只支持formData.append()方法

    解决方法:暂时没有摸索出更好的方法,只是尽量第一次塞进去的值是干净可用的。

5.ie下input框设置了readonly属性,鼠标还是可以点击光标聚焦

    解决方法:放弃readonly属性,采用disabled属性方法。

<input type="text" name="email" disabled="disabled">

6.ie下input框的change事件不能用enter键触发

   解决方法:用键盘捕捉事件,判断键值是否等于‘13’(enter),满足条件再调用change事件

   代码:

   //是否为ie浏览器

   getIsIE() {

        if (!!window["ActiveXObject"] || "ActiveXObject" in window) return true;

       else return false;

   }

  // 获取回车键事件 -- 兼容ie

  getEnterEvent(e) {

     //判断是否是ie浏览器

     if(getIsIE()) {

      if(e.keyCode == 13){

          //注意判断值没有发生变化时不做修改

     }

}

 

 

 

  • 7
    点赞
  • 30
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值