前言有面试经验的同学应该都被问过浏览器兼容性问题。当面试官提问时，他们常常措手不及，因为他们通常是这样问的。“我们来说说浏览器兼容性”、“你学过浏览器兼容性”，那么我们应该如何正确回答这个问题呢？虽然面试官的问题很笼统，但浏览器兼容性无非就是样式兼容性（css）、交互兼容性（javascript）、浏览器hack。在样式兼容性（css）方面，由于历史原因，不同浏览器的样式存在差异。你可以通过Normalize.css来平滑差异，或者自定义你自己的reset.css，比如通过通配符选择器全局重置样式*{margin:0;填充：0；}在CSS3成为真正的标准之前，浏览器供应商开始支持使用这些属性。当CSS3样式语法还在波动时，浏览器供应商提供了浏览器特定的前缀。直到现在，一些属性仍然需要以浏览器为前缀。在开发过程中，我们一般会使用IDE开发插件、css预处理器、前端自动化构建项目来帮我们处理。浏览器核心与前缀的对应关系如下。核心代表的浏览器前缀主要是TridentIEbrowser-msGeckoFirefox-mozPrestoOpera-oWebkitChrome和Safari-webkit我们在还原设计稿的时候经常需要用到透明属性，所以解决IE9以下的浏览器Opacit无法使用。不透明度：0.5；滤镜：alpha（不透明度=50）；//IE6-IE8我们习惯使用filter滤镜属性来实现滤镜：progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=50);//IE4-IE9支持过滤器写法progid:DXImageTransform.Microsoft.Alpha(Opacity=xx)交互兼容性（javascript）事件兼容性问题，我们通常需要封装一个适配器方法来对过滤器事件处理程序进行绑定、移除、模拟冒泡阻塞和默认事件行为处理varhelper={}//绑定事件helper.on=function(target,type,handler){if(target.addEventListener){target.addEventListener(type,handler,false);}else{target.attachEvent("on"+type,function(event){returnhandler.call(target,event);},false);}};//取消事件监听helper.remove=function(target,type,handler){if(target.removeEventListener){target.removeEventListener（类型，处理程序）；}else{目标。detachEvent("on"+type,function(event){returnhandler.call(target,event);},truee);}};newDate()构造函数使用，'2018-07-05'不能被各种浏览器使用，使用newDate(str)正确生成日期对象的正确用法是'2018/07/05'。通过document.documentElement.scrollTop获取scrollTop兼容非chrome浏览器varscrollTop=document.documentElement.scrollTop||document.body.scrollTop;浏览器破解快速判断IE浏览器版本判断是否是Safari浏览器/Safari/varisSafari=/a/.__proto__=='//';判断是否是Chrome浏览器/Chrome/varisChrome=Boolean(window.chrome);身材不能丢，我们是逼格前端“什么？你们公司必须兼容IE6，我们现在的面试就这些了，拜拜。”现在有哪家公司要兼容IE6，那就别去了，开发多不爽。延伸阅读如何处理CSS3属性前缀_AutoprefixerCSS透明不透明度及IE各版本透明滤镜滤镜最准确的用法上一篇精读《你不知道的 javascript（上卷）》精读《你不知道的javascript》中卷精读《深入浅出Node.js》javascript精读《图解HTTP》思维导图下载地址
