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

前言

有过面试经验的同窗应该都被问过浏览器兼容性的问题，对于面试官的问题，经常猝不及防，由于一般他们都是这么问的。"来谈谈浏览器兼容的问题吧"，"你对浏览器的兼容性有了解过吗"，那么如何才是咱们正确回答这个问题的姿式呢。

虽然面试官的问题十分的笼统，浏览器的兼容性无非仍是样式兼容性（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和Safari	-webkit

3. 在还原设计稿的时候咱们经常会须要用到透明属性，因此解决 IE9 如下浏览器不能使用 opacit。

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

交互兼容性（javascript）

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

   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

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

   <!--[if IE 8]> ie8 <![endif]-->
    
    <!--[if IE 9]> 骚气的 ie9 浏览器 <![endif]-->
   复制代码

2. 判断是不是 Safari 浏览器

   /* Safari */
    var isSafari = /a/.__proto__=='//';
   复制代码

3. 判断是不是 Chrome 浏览器

   /* Chrome */
    var isChrome = Boolean(window.chrome);
   复制代码

身段不能掉，咱们是个有逼格的前端

“什么？大家公司要兼容IE6，咱们今天的面试就到这里为止吧，告辞”。

扩展阅读

如何处理CSS3属性前缀_Autoprefixer

CSS透明opacity和IE各版本透明度滤镜filter的最准确用法

往期文章

精读《你不知道的 javascript（上卷）》

精读《你不知道的javascript》中卷

精读《深刻浅出Node.js》

javascript 垃圾回收算法

精读《图解HTTP》

思惟导图下载地址