目录

  1. 浏览器兼容性
    1. 样式兼容(CSS)方面
    2. 交互兼容(javascript)
    3. 浏览器 hack(CSS hack)

转载：
　　如何机智地回答浏览器兼容性问题

浏览器兼容性

　　浏览器的兼容性无非还是样式兼容性（css），交互兼容性（javascript），浏览器 hack三个方面。

样式兼容(CSS)方面

　　1、因为历史原因，不同的浏览器样式存在差异，可以通过 Normalize.css 抹平差异，也可以定制自己的 reset.css，例如通过通配符选择器，全局重置样式:* { margin: 0; padding: 0; }
　　2、在CSS3还没有成为真正的标准时，浏览器厂商就开始支持这些属性的使用了。CSS3样式语法还存在波动时，浏览器厂商提供了针对浏览器的前缀，直到现在还是有部分的属性需要加上浏览器前缀。在开发过程中我们一般通过IDE开发插件、css 预处理器以及前端自动化构建工程帮我们处理。
浏览器内核与前缀的对应关系如下:

内核 主要代表的浏览器 前缀
Trident IE浏览器 -ms
Gecko Firefox -moz
Presto Opera -o
Webkit Chrome(blink)、Safari -webkit

　　3、在还原设计稿的时候我们常常会需要用到透明属性，所以解决 IE9 以下浏览器不能使用 opacity。

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

交互兼容(javascript)

　　1、事件兼容的问题，我们通常需要会封装一个适配器的方法，过滤事件句柄绑定、移除、冒泡阻止以及默认事件行为处理

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

　　2、new Date()构造函数使用，’2018-07-05’是无法被各个浏览器中，使用new Date(str)来正确生成日期对象的。 正确的用法是’2018/07/05’.
　　3、获取 scrollTop 通过 document.documentElement.scrollTop 兼容非chrome浏览器
var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;

浏览器 hack(CSS hack)

　　由于不同厂商的流览器或某浏览器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），对CSS的支持、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时，我们为了获得统一的页面效果，就需要针对不同的浏览器或不同版本写特定的CSS样式，我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程，叫做CSS hack!
　　1、快速判断 IE 浏览器版本

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

　　2、判断是否是 Safari 浏览器

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

　　3、判断是否是 Chrome 浏览器

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

关于 浏览器hack:
　　英文：BROWSERHACKS
　　中文：主流浏览器的Hack写法
　　史上最全的CSS hack方式一览