浏览器的兼容性无非还是样式兼容性（css），交互兼容性（javascript），浏览器 hack 三个方面。
CSS兼容
- 不同的浏览器样式存在差异，可以通过 Normalize.css 抹平差异，也可以定制自己的 reset.css。
<link href="https://cdn.bootcss.com/normalize/7.0.0/normalize.min.css" rel="stylesheet">
例如通过通配符选择器，全局重置样式:
*{margin:0,padding:0}
- 浏览器厂商提供了针对浏览器的前缀，直到现在还是有部分的属性需要加上浏览器前缀。
浏览器内核与前缀的对应关系如下:
|内核 |主要代表的浏览器 |前缀|
|Trident |IE浏览器 |-ms|
|Gecko| |Firefox |-moz|
|Presto| |Opera |-o|
|Webkit| |Chrome和Safari |-webkit|
交互兼容
浏览器hack
- 判断是否是 Chrome 浏览器
/* Chrome */
var isChrome = Boolean(window.chrome);
- 判断是否是 Safari 浏览器
/* Safari */
var isSafari = /a/.__proto__=='//';
