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

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>

 

小程序：

1、某些手机下小程序没有console.table的API

 

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);
　　　　// ...
　　},
}

 

3、iphone6s, iphone7 部分IOS版本中  writing-mode: vertical-lr; text-align: center; 没有垂直居中

　　解决方法：

　　　　1、改用flex布局

　　　　2、添加margin: auto 0;

4、fetch标准实现，实测在Safari 11.1.1 中fetch(url, option)，如果是get请求，在option中携带body会导致Type Error

 

Android Browser：

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

　　解决方法：

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

　　原理：将父元素100%宽度，子元素绝对定位，宽度100%