浏览器兼容性问题

1、样式兼容 css

1. 因为历史原因，不同的浏览器样式存在差异，可以通过 Normalize.css 抹平差异，也可以定制自己的 reset.css，例如通过通配符选择器，全局重置样式。

* { margin: 0; padding: 0; }

2. 在CSS3还没有成为真正的标准时，浏览器厂商就开始支持这些属性的使用了。提供了针对浏览器的前缀，直到现在还是有部分的属性需要加上浏览器前缀。

2、交互兼容 JS

2.1 事件兼容：

添加事件句柄：addEventListener、attchEvent；

移除事件句柄：removeEventListener、deleteEvent；

取消默认事件：preventDefault、returnValue = false;

阻止事件冒泡：stopPropagation、cancelBabble = true;

2.2 new Date() 构造函数使用：

‘2018-07-05’是无法被各个浏览器中，使用new Date(str) 来正确生成日期对象的。

正确的用法是’2018/07/05’.

2.3 获取 scrollTop

const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

3、Android — ios 兼容性

3.1 input输入框聚焦

input输入框在聚焦的时候，ios有时候会出现outline或者阴影，安卓则是显示正常的。

input:focus{outline:none}
input:{-webkit-appearance: none;}

3.2 fixed定位缺陷

ios下fixed元素容易定位出错，软键盘弹出时，影响fixed元素定位。

android下fixed表现要比iOS更好，软键盘弹出时，不会影响fixed元素定位。

ios4下不支持position:fixed

3.3 svg 在ios不显示

3.4 h5底部输入框被键盘遮挡

在h5的静态页面会出现一个非常难受的问题，就是当页面出现多个input输入框的时候，导致最下面一个输入框，点击的时候弹出的键盘会遮挡输入框。用户根本不知道自己输入的是什么，对用户的体验非常不友好。解决方案：

1.就是选中当前的DOM元素，让他出现在可视区域的顶部或者底部。代码如下：

document.querySelector('#inputId').scrollIntoView();