前端常见兼容性问题以及解决方法

市场上浏览器的种类很多，不同的浏览器内核也不同，所以对网页的解析存在一定的差异。浏览器内核主要分为两种，一是渲染引擎，另一个是 js 引擎，内核更加倾向于说渲染引擎。
常见的浏览器内核分为四种：常见的浏览器内核可以分四种:Webkit、Trident、Gecko、Blink

浏览器	内核
IE浏览器	Trident内核，也成为lE内核
Chrome浏览器	Webkit内核，现在是Blink内核
Firefox浏览器	Gecko内核,俗称Firefox内核
Safari浏览器	wWebkit内核
Opera浏览器	最初是自己的Presto内核，后来加入谷歌大军，从Webkit又到了Blink内核;
360浏览器	IE+Chrome双内核
猎豹浏览器	IE+Chrome双内核
百度浏览器	IE内核
QQ浏览器	Trident(兼容模式)+Webkit(高速模式)

一、CSS兼容

1.不同浏览器的标签默认的外补丁( margin )和内补丁(padding)不同

解决方案：
1.CSS里*{margin：0;padding：0;},但是性能不好
2.—般我们会引入 reset.css 样式重置；

备注：这个是最常见的也是最易解决的一个浏览器兼容性问题，所有的CSS文件开头都会用样式重置各个标签的内外补丁是0。

2、IE6双边距问题;在IE6中设置了float ，同时又设置margin,就会出现边距问题

解决方案：设置display：inline;

3、当标签的高度设置小于10px，在 IE6、IE7 中会超出自己设置的高度

解决方案：超出高度的标签设置overflow：hidden;，或者设置line-height的值小于你的设置高度

4、图片默认有间距

解决方案：使用float为 img 布局

5、IE9—下浏览器不能使用 opacity

解决方案：opacity: 0.5;filter: alpha(opacity = 50);filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);

6、边距重叠问题：当相邻两个元素都设置了 margin 边距时, margin将取最大值，舍弃最小值

解决方案：为了不让边重叠，可以给子元素增加一个父级元素，并设置父级元素为overflow：hidden;

7、cursor:hand 显示手型在 safari上不支持

解决方案：统一使用cursor：pointer;

8、两个块级元素，父元索设置了overflow：auto；子元素设置了position：relative ;且高度大于父元素，在IE6，IF7会被隐藏而不昙溢出

解决方案：父级元素设置position：relative;

二、js兼容

1. 事件绑定

IE: dom.attachEvent();

标准浏览器: dom.addEventListener(‘click’, function(event){ },false);

标准浏览器采用事件捕获的方式对应 IE 的事件冒泡机制（即标准由最外元素至最内元素或者 IE 由最内元素到最外元素）最后标准方亦觉得 IE 这方面的比较合理，所以便将事件冒泡纳入了标准，这也是addEventListener第三个参数的由来，而且事件冒泡作为了默认值第三值，默认false，表示事件冒泡方式。

如果浏览器不支持addEventListener()方法，你可以使用attachEvent()方法替代。

以下实例演示了跨浏览器的解决方法：

var x = document.getElementByld ( "myBtn");
if (x.addEventListener){
   	//所有主流浏览器，ie9+
	x.addEventListener("click", myFunction);
}