常见浏览器，其兼容问题及解决方案

首先了解下各个浏览器。 常见的浏览器内核可以分为四种：Webkit、Trident、Gecko、Persto(Blink)

常见的兼容性问题

css相关

1. 不同浏览器的标签默认的margin和padding不同

   解决方案：css里面增加通配符*{margin:0;padding:0;}

2. IE双边距问题，在IE中设置了float，同时又设置margin，就会出现边距问题

   解决方案：设置display:inline;

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

   解决方案：超出高度的标签设置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;且高度大于父元素，在IE67会被隐藏而不是溢出

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

JS相关

1. const问题，在FF下，可以使用const关键字或者var关键字定义常量，IE下只能使用var关键字来定义常量

   解决方案：统一使用var关键字来定义常量

2. event.srcElement问题，在IE下，event对象有srcElement属性，但是没有target属性；FF下，even对象有target属性，但是没有srcElement属性。

   解决方案：使用srcObj=event.srcElement?event.srcElement:even.target;

3. 事件绑定

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

4. 操作tr的html

   在IE9以下，不能操作tr的innerHTML

5. innerText的问题,innerTex在IE中能正常工作，但是innerText在FF中不行

   解决方案：在非IE浏览器中使用textContent代替innerText