浏览器兼容大致分为：样式兼容（css）\交互兼容（js）\浏览器hack

一、样式兼容（css）:

1.通过重置样式表来实现不同浏览器的margin和padding的差异
例如—

  1.  * { margin: 0; padding: 0; }   // 不推荐使用，略low

2.不同浏览器内核上的兼容，通过添加前置样式来实现
例如—

  1. IE                      -ms-
  2. 火狐                    -moz-
  3. 欧朋                    -o-
  4. 谷歌                    -webkit-

3.透明度opacit，不兼容IE9以下浏览器,可以使用滤镜属性，来实现
例如—

  1.  opacity: 0.5;
  2.  filter: alpha(opacity = 50); //IE6-IE8我们习惯使用filter滤镜属性来进行实现
  3.  filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50); //IE4-IE9都支持滤镜写法progid:DXImageTransform.Microsoft.Alpha(Opacity=xx)

二、交互的兼容（js）

1.事件兼容问题，封装一个适配器方法
例如—

  1.  var  helper = {}
  3.  //绑定事件
  4.  helper.on = function(target, type, handler) {
  5.      if(target.addEventListener) {
  6.          target.addEventListener(type, handler, false);
  7.      } else {
  8.          target.attachEvent("on" + type,
  9.              function(event) {
  10.                  return handler.call(target, event);
  11.              }, false);
  12.      }
  13.  };
  15.  //取消事件监听
  16.  helper.remove = function(target, type, handler) {
  17.      if(target.removeEventListener) {
  18.          target.removeEventListener(type, handler);
  19.      } else {
  20.          target.detachEvent("on" + type,
  21.          function(event) {
  22.              return handler.call(target, event);
  23.          }, true);
  24.      }
  25.  };

2.new Data()构造函数使用 “-“ 连接在别的浏览器不兼容，需要改成”/“
例如—

  1. var str = “2019-03-03”;
  3. var time = new Date(Date.parse(str.replace(/-/g,"/")));

3.获取窗口高度，兼容其他浏览器
例如—

  1.  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

三、浏览器hack

1.快速判断 IE 浏览器版本

  1. <!--[if IE 8]> ie8 <![endif]-->
  3.  <!--[if IE 9]> 骚气的 ie9 浏览器 <![endif]-->

2.判断是否是 Safari 浏览器

  1. /* Safari */
  3.  var isSafari = /a/.__proto__=='//';

3.判断是否是 Chrome 浏览器

  1. /* Chrome */
  3.  var isChrome = Boolean(window.chrome);