记录遇到的浏览器兼容问题

1. flex布局下使用绝对定位

 结果：ios少部分机型的（ios10）和部分安卓机型的样式错乱，比如通过flex布局实现的子元素居中效果会不起作用。

鉴于之前也遇到的类似的问题，很快就总结出一套规律：flex布局下不要使用绝对定位(absolute/fixed)

  .parent {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
  .child {
    position: absolute;
  }

// 会出现问题

当父元素是flex布局而子元素是absolute布局时，想通过父元素的达到子元素的居中效果，这时候就会出难以察觉的bug。在chrome开发者工具，微信开发者工具，都不会出现居中失效的问题。哪怕真机测试（部分真机也不会出现问题）也没问题。

但是在部分机型，低版本ios和部分安卓机就会出现居中失效。

解决方法：摒弃这种布局陋习，或者在外层再套一层div，设置div，position:relative

 

 

2. HTML5触摸事件：touchstart、touchmove和touchend

记得写上阻止默认事件，否则在部分安卓机上（华为Pro mate20/魅族等）该事件会失效，（尚未在苹果机上出现事件失效）

document.getElementById("start-btn").addEventListener("touchstart", function (e) {
  e.preventDefault();  // 别忘了这句话
  // do something ...
}, false);

 

 

3. 追加生成的dom结点，点击事件苹果部分机型不起作用，但安卓机型一起正常

解决方法：dom结点写上样式 cursor:pointer；

https://blog.youkuaiyun.com/qq_30604453/article/details/70240621

 

4. font-weight:600;在部分安卓机型加粗无效，但苹果机正常

解决方法：统一使用font-weight:bold;来实现加粗效果

 

5.new Date(str) IOS系统跟Android系统不兼容

str 为 '2018-10-10 18:00’

在IOS系统中出错。经log检查，发现new Date(str)拿到的是null。

原来，'2018-10-10 18:00’时间格式适用于Android系统，但是IOS系统却要这种时间格式‘2014-09-25T13:24:00’

解决方法：new Date(str.replace(/\-/g, '/'))

 

6. new Date(时间戳) 转化年份为1970年 (这算不得兼容问题，只是提醒自己)

解决方法 new Date（时间戳*1000）

 

 

//  待续