以前开发过的两个项目都是内部系统，强制要求使用chrome浏览器，不过在验收的时候甲方还是用猎豹测试了一下，果然功能都不对了。现在再次拾起了前端，还是研究一下浏览器兼容性。本文一部分是个人的经验，大部分还是借鉴的前辈。
首先声明我是新手，下面的内容一点也不权威，如果写错了请大家用各种方式指教。
主流浏览器包括IE6+(我可以说IE6已经下岗了吗)，Chrome,Safari,Opara,FireFox，后四种浏览器又各自有不同的版本。
浏览器兼容问题我总结为了4种：
一、编码不规范
举个我遇到的例子，Date()函数的参数是有格式要求的，一共有五种格式可选，然而有些浏览器，比如Chrome可以识别其他的格式的入参格式，但是当你在其他浏览器运行时，就会出现不可预计的错误。这个平时就要多看标准，多查手册，多进坑，多踩雷。
二、浏览器差异，相同的功能不同的实现
最典型的事件event要写成event = event || window.event。这种东西也是靠经验积累吧。如果没遇到过根本不明白为什么别人的代码要写成那个样子。
类似的还有不同浏览器对一些标签的初始样式设定不一致，可以通过设置reset.css对所有标签样式自己初始化一遍
三、浏览器兼容性问题，很多功能不支持
尤其对于很早的浏览器IE6，IE7，一些新的功能和属性都不支持。CSS3，HTML5，ES6一般都介绍了自己的浏览器兼容性，在写代码之前都可以查一查，HBuilder就自带了这个功能（不支持ES6）。在不兼容时怎么办：1、可以寻找有类似功能的替代方案，比如css的清除浮动，IE不支持伪类，所以单独设置zoom:1,还可以通过使用polyfill，给浏览器实现这些功能。2、放弃那些新的技术，使用兼容性好的技术，不过估计很少有人会这么选。3、为低级浏览器单独实现一套代码，增加工作量，但是很简单4、抛弃低级浏览器
还有就是在一些css属性成为标准之前，有些浏览器就实现了它，但是需要加入前缀。通过加入前缀的方法，可以使一些属性的兼容性提升不少。（通过sass可以很容易实现自动添加前缀）
四、浏览器Bug
一些常见的bug很容易搜到，一个有限集合，都记住就好了。对应的解决方案也都可以查到。
写再多理论也还是要实践的，把上一篇文章代码在IE下跑了一下，全都不对。一步一步的修改一下：
1、我用到了一些es6的语法，全都改回去let 变var(使用ES6语法的时候可以使用babel编译为ES5的语法)
2、IE下文字乱码，原谅我好久不写了，犯了低级错误，加上 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
3、hover没效果，断点跟踪发现时currentTarget的问题，查了一下，为了兼容IE和FireFox，要写成event.target || event.srcElement
4、IE11下三角显示错误，IE不支持after伪类，在div内手动声明一个子元素，并制作成和气泡背景色一致的三角，把边框的dashed改为solid
5、气泡的上下箭头不能反过来，setAttribute的兼容性问题，改为直接访问className
6、IE下，出现滚动条后气泡出现位置不对，因为获取滚动条偏移量的方法不对，改为scrollTop = document.body.scrollTop===0?document.documentElement.scrollTop:document.body.scrollTop;
至此，之前的页面可以在IE8，IE11，chrome下正常运行，贴一下代码
<!DOCTYPE html> <html> <head> <title>test2</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> .base{ width:150px; height:150px; border:2px solid black; margin-top:100px; margin-left:100px; } .pop{ width:200px; height:100px; border:2px solid grey; border-radius: 2px; box-shadow: 2px 2px 2px grey; position:fixed; display:none; background-color:white; } .triangle-bottom{ width:0; height:0; border-top:20px solid grey; border-left:10px solid transparent; border-right:10px solid transparent; position:absolute; left:90px; top:100px; } .triangle-bottom .after{ content:''; width:0; height:0; border-top:18px solid white; border-left:8px solid transparent; border-right:8px solid transparent; position:absolute; left:-8px; top:-20px; } .triangle-top{ width:0; height:0; border-bottom:20px solid grey; border-left:10px solid transparent; border-right:10px solid transparent; position:absolute; left:90px; bottom:100px; } .triangle-top .after{ content:''; width:0; height:0; border-bottom:18px solid white; border-left:8px solid transparent; border-right:8px solid transparent; position:absolute; left:-8px; bottom:-20px; } </style> </head> <body> <div onmouseover="show()" onmouseout="hiden()" class='base' name='base'> 鼠标放我上面出气泡 </div> <div onmouseover="show()" onmouseout="hiden()" class='base' name='base'> 鼠标放我上面出气泡 </div> <div onmouseover="show()" onmouseout="hiden()" class='base' name='base'> 鼠标放我上面出气泡 </div> <div onmouseover="show()" onmouseout="hiden()" class='base' name='base'> 鼠标放我上面出气泡 </div> <div onmouseover="show()" onmouseout="hiden()" class='base' name='base'> 鼠标放我上面出气泡 </div> <div onmouseover="show()" onmouseout="hiden()" class='base' name='base'> 鼠标放我上面出气泡 </div> <div onmouseover="show()" onmouseout="hiden()" class='base' name='base'> 鼠标放我上面出气泡 </div> <div onmouseover="show()" onmouseout="hiden()" class='base' name='base'> 鼠标放我上面出气泡 </div> <div class='pop' id='pop'> <div id='triangle' class='triangle-bottom'><div class='after'></div></div> </div> </body> <script type="text/javascript"> function show(event){ event=event||window.event; var pop=document.getElementById('pop'); var x=0,y=0; var target = event.target||event.srcElement; var scrollTop = document.body.scrollTop===0?document.documentElement.scrollTop:document.body.scrollTop; while(target.offsetParent!==null){ x+=target.offsetTop; y+=target.offsetLeft; target=target.offsetParent; } pop.style.display='block'; pop.style.left=y-25+'px'; if(x-100-100<scrollTop){ document.getElementById('triangle').className='triangle-top'; pop.style.top=x+150-scrollTop+'px'; }else{ document.getElementById('triangle').className='triangle-bottom'; pop.style.top=x-100-scrollTop+'px'; } } function hiden(){ var pop=document.getElementById('pop'); pop.style.display='none'; } document.getElementsByName('base'); function aaa(){ alert('123'); } </script> </html>
不得不说，仅仅实现了这样简单的一个页面就出现了这么多兼容性问题，不过大部分问题都是我经验太少，编码不规范导致。浏览器的兼容性果然不是靠看几篇文章就能速成的，必须要靠一点一点的调试积累经验。
在后续遇到兼容性问题时，我会补充在下面：
