前端开发兼容性问题总结

记录一下前端开发兼容性问题的一些坑

1.火狐

（1）火狐浏览器的a,span,button等标签在聚焦时会出现一条黑色的虚线，这个需要在CSS中写入：

            button::-moz-focus-inner{outline:0;border-color:transparent;}

（2）火狐浏览器在button中包裹会导致input无法被正常点击，在使用其他标签时可以正常解决这个问题；

2.IE

ie主要遇到的是一些es6的支持问题，比如Promise，fetch，以及很多array和object的新方法都无法支持，Promise可以使用bluebird处理，fetch可以引入whatwg-fetch处理，其他的一些方法可以用babel-polyfill处理，但是需要注意babel-polyfill对于个别几个es6特性也是无法兼容的。

                                                                   箭头函数    支持

                                                         类的声明和继承    部分支持，IE8不支持

                                                      增强的对象字面量    支持

                                                                 字符串模板    支持

                                                                            解构    支持，但注意使用方式

                             参数默认值，不定参数，拓展参数    支持

                                                                   let与const    支持

                                                                           for of    IE不支持

                                                       iterator, generator    不支持

                                模块 module、Proxies、Symbol    不支持

                            Map，Set 和 WeakMap，WeakSet    不支持

Promises、Math，Number，String，Object 的新API    不支持

                                                            export & import    支持

                                                                   生成器函数    不支持

                                                                       数组拷贝     支持

以上是babel-polyfill支持情况的表

3.QQ浏览器

最新版本使用的是IE11的内核，兼容性只要能保证IE11的问题解决，QQ浏览器的问题基本都可以解决。

4.搜狗浏览器

分兼容版和高速版，高速版只用的是谷歌内核，效果还可以，兼容版用的是IE11的内核。切换时有的时候会切换成IE11的兼容版内核，那就很蛋疼了。

5.safari

当触发滚动时，如果想获取页面滚动高度，需要获得的属性和其他浏览器都不一样：

其他浏览器：document.documentElement.scrollTop；

safari：document.body.scrollTop；

这两个属性各个浏览器都有，但是如果不支持的会始终为0