专栏首页向前进最近遇到的兼容性问题和适配问题

最近遇到的兼容性问题和适配问题

JS:

IE:

1、不能添加监听标准事件,添加polyfill

    initEvent: function initEvent(dom, eventName, callback) {
      if (!dom || !eventName || !callback) return;
      if (document.addEventListener) { // 一般浏览器
        dom.addEventListener(eventName, callback, false);
      } else if (document.attachEvent) { // IE
        dom.attachEvent('on' + eventName, callback);
      } else {
        dom['on' + eventName] = callback;
      }
    },

2、不支持classlist,添加polyfill模拟jquery

    addClass: function addClass(dom, className) {
      if (!dom) return;
      if (this.hasClass(dom, className)) return;
      dom.className = dom.className + ' ' + className;
    },

    removeClass: function removeClass(dom, className) {
      if (!dom) return;
      dom.className = dom.className.replace(' ' + className, '');
      dom.className = dom.className.replace(className, '');
    },

    hasClass: function hasClass(dom, className) {
      return dom.className.match(' ' + className) || dom.className.match(className);
    },

    toggleClass: function toggleClass(dom, className) {
      if (this.hasClass(dom, className)) {
        this.removeClass(dom, className);
      } else {
        this.addClass(dom, className);
      }
    },

3、不支持HTML5新标签,引入HTML5SHIV

<script src="./static/html5shiv.min.js"></script>

CSS:

IE:

1、IE7及以下display: inline-block表现异常,div设置为inline-block显示为block:

  解决方法:

    display: inline-block;
  
  /* IE7及以下的Polyfill */

    display: inline-block;
    *zoom: 1;
    *display: inline;

  原理:IE7及以下识能别到  *[属性key],利用IE7中inline-block表现为block可以设置宽高,然后利用*zoom触发重排,利用*display覆盖block

2、IE8及以下不支持background-size:

  解决方法:

   padding-bottom: 36.7630492%;
   background: url('../../static/images/home_one@1x.png') no-repeat center;
   background-size: 100% 100%;

   /* IE8 background-size Hack */
   filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
      src='../../static/images/home_one@1x.png',
      sizingMethod='scale');

  原理:利用IE中的过滤器对象处理,会有轻微闪烁问题。

3、IE10、IE11、IE edge中 flex + min-height 导致高度丢失

  解决方法: 参考 solved-by-flexbox :https://github.com/philipwalton/solved-by-flexbox/blob/master/assets/css/components/site.css

.root {
 min-width: 960px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  height: 100%; /* 在min-height之外用100%高度, 利用content撑开*/
}

.header-back {
  flex: none; /* 固定 */
  display: block;
  width: 100%;
  height: 64px;
}

.content {
  flex: 1 0 auto; /* 弹性 */
  margin: 15px auto;
  width: 100%;
  max-width: 1266px;
}

.footer {
  flex: none; /* 固定 */
  display: block;
  width: 100%;
  height: 60px;
}

Safari:

1、Safari中min-width: unset无效:

  解决方法:

  min-width: 900px;
  ...
  @media screen and (max-width: $min-width) {
    min-width: unset;
    ...
  }

  /* 改为不会生效的值0px */
  min-width: 900px;
  ...
  @media screen and (max-width: $min-width) {
    min-width: 0px;
    ...
  }

  原理:IE7中和Android4.3版本也不支持unset,但是会当做无效值覆盖之前的min-width,而在Safari5中,会当做无效的代码,元素会保持原来的min-width。

2、IOS9中光标定位问题:

  在Vue2.4版本以下,nextTick实现是以MO和Promise为优先的策略,(MO和Promise都为MicroTask,优先执行)

  当一个input值改变事件如有有Watcher监听,并且在Watcher触发了另外的DOM元素重绘,多次重绘会导致input框的渲染不生效

  解决方法:

    1、把可能影响DOM的渲染domtask放入下一个MacroTask,这样就会等到input渲染完毕再执行domtask

    2、升级Vue至最新版本,最新版本中nextTick在WacherDOM的onXXX事件时,优先以MacroTask执行

     
watcher: {
  inputValue(){
    // ...
    setTimeout(() => {
          // 其他可能影响DOM渲染的task,比如
          //  this.showFlag = false;
        }, 0);
    // ...
  },
}

Android Browser:

1、Android4.3下不支持 vw宽度:

  解决方法:

  position: absolute;
  right: 0;
  top: 0;
  width: 100%;

  原理:将父元素100%宽度,子元素绝对定位,宽度100%

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【笔记】nodejs读取JSON,数组转树

    const fs = require('fs'); // --------------- 读取源文件 --------------- const origin...

    SmileSmith
  • Flexbox 练习和总结

    练习地址: http://flexboxfroggy.com/ Welcome to Flexbox Froggy, a game where you help...

    SmileSmith
  • 【笔记】跨域重定向中使用Ajax(XHR请求)导致跨域失败

    1、前端Web中有两个域名,a.com和b.com,其中a.com是访问主站(页面),b.com是数据提交接口的服务器(XHR请求)

    SmileSmith
  • 一位技术创业者的11点总结,全在这篇文章里了

    通过对有赞零售技术负责人李星的专访,场主揭秘了阿里“五年陈”的他为何离开,独自前往上海;两年创业期间遇到了哪些坎坷,有何收获与总结;对创业这件事是否有改观;技术...

    养码场
  • Blob初探

    简介   Blob在js中意味着二进制大数据。实现该接口的对象有3个属性,分别是type(MIME),size(byte)和 一个切割方法:slice(在大文件...

    欲休
  • 笔记:NEC QTP 第二个实例

    Set testWindow=new ClassJavaWindow testWindow.SetJavaWindow("User Login") Set i...

    超级大猪
  • 地震信号的一些基本概念

    可控震源是指通过一个与大地紧密耦合的振动平板,以反作用方式向地下传送一组连续振动的弹性波信号(又称扫描信号),再经过对地面接收到的反射波信号的处理和辨识,用于解...

    DSPSTACK.COM
  • JS示例10-ajax的简单使用

    1、GET请求 2、eval的使用(读取JSON) 3、创建元素document.createElement('li') 4、innerHTML的使用

    专注APP开发
  • 30岁的程序员,你迷惘了吗?

    摘要:本文写给30左右还奋斗于编写岗位的程序员们,因为在这个年龄段,可能技能、岗位、收入都已相对稳定,但同时,大家或多或少有些不同想法,或收入,或前途,或即将创...

    用户1410343
  • 当前深度学习和 SLAM 结合有哪些比较好的论文

    简单介绍几个比较有代表性的工作, 分为以下几类: I. 相机重定位(Relocalization) Deep Learning 和 SLAM 结合的开山之作...

    AI研习社

扫码关注云+社区

领取腾讯云代金券