为什么会有兼容问题？
由于市场上浏览器种类众多，而不同浏览器其内核亦不尽相同，所以各个浏览器对网页的解析就有一定出入，这也是导致浏览器兼容问题出现的主要原因，我们的网页需要在主流浏览器上正常运行，就需要做好浏览器兼容。
以下为主流浏览器的内核：
我们诚然应该追求最新的浏览器使用最新的技术，但是渐进增强，向后兼容的思想一定要有：
1.HTML兼容性：
HTML相关问题比较容易处理，无非是高版本浏览器用了低版本浏览器无法识别的元素，导致其不能解析，所以平时注意一点就是，特别是HTML5增加了许多新标签。
2.CSS兼容性：
- 不同浏览器的标签默认的外边距（margin）和内边距（padding）不同
解决方案：css添加通配符 *{ margin：0;padding：0; }
- IE6双边距问题；在IE6设置了float，同时又设置margin，就会出现边框问题
解决方案：设置display：inline;
- 当标签的高度设置小于10px，在IE6、IE7中超过自己设置的高度
解决方案：超出的高度设置overflow：hidden；或者设置line-height值小于你的设置高度
- 图片默认有间距
解决方案：使用float为img布局
- IE9浏览器不能使用opacity
解决方案：opacity:0.5;filter:alpha(opacity=50);filter:progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);
- 边距重叠问题；相邻两个元素都设置的margin（上下）时，margin将会取最大值
解决方案：可以给子元素添加一个父级元素，并且设置父级元素为overflow：hidden
- Cursion：hand显示手势在safari上不支持
解决方案：统一使用 cursor:pointer
- 两个块级元素，父元素设置了overflow:auto；子元素设置了position:relative ;且高度大于父元素，在IE6、IE7会被隐藏而不是溢出；
解决方案：父级元素设置position:relative
3.JavaScript兼容性：
各个浏览器基本语法差距不大，其兼容问题主要出现在各个浏览器的实现上，尤其对事件的支持有很大问题。
- 在标准的事件绑定中绑定事件的方法函数为 addEventListener,而IE使用的是attachEvent。
- 标准浏览器采用事件捕获的方式对应IE的事件冒泡机制（即标准由最外元素至最内元素或者IE由最内元素到最外元素）最后标准方亦觉得IE这方面的比较合理，所以便将事件冒泡纳入了标准，这也是addEventListener第三个参数的由来，而且事件冒泡作为了默认值。
- 事件处理中非常有用的event属性获得亦不相同，标准浏览器是作为参数带人，而ie是window.event方式获得，获得目标元素ie为e.srcElement 标准浏览器为e.target
- 然后在ie中是不能操作tr的innerHtml的。
- 然后ie日期函数处理与其它浏览器不大一致，比如： var year= new Date().getYear(); 在IE中会获得当前年，但是在firefox中则会获得当前年与1900的差值。
- 获得DOM节点的方法有所差异，其获得子节点方法不一致。
- IE：parentElement parentElement.children Firefox：parentNode parentNode.childNodes childNodes的下标的含义在IE和Firefox中不同，Firefox使用DOM规范，childNodes中会插入空白文本节点。一般可以通过node.getElementsByTagName()来回避这个问题。
- 当html中节点缺失时，IE和Firefox对parentNode的解释不同。例如:
- <form> <table> <input/> </table> </form> IE：input.parentNode的值为空节点 Firefox：input.parentNode的值为form 解决方法：Firefox中节点没有removeNode方法，必须使用如下方法 node.parentNode.removeChild(node)
- 关于AJAX的实现上亦有所不同。
解决方案：使用开发库，例如JQuery等框架
原文地址：https://www.cnblogs.com/whs5280/p/9710444.html