在不同的浏览器中，浏览器的内核都是不相同的，所以各个浏览器对网页的解析存在一定的差异。

浏览器内核主要分为两种，一是渲染引擎，另一个是js引擎，所以浏览器的兼容性问题一般是指:css兼容、js兼容

Css兼容性问题：

1。不同浏览器的标签默认的margin和padding不同浏览器兼容性问题

解决办法：可以通过设置全局样式来解决这个问题，这样所有的样式都会重置，初始值都会相同了。

2。css3新属性，加浏览器前缀兼容早期浏览

-moz- / 火狐浏览器 /

-webkit- / Safari, 谷歌浏览器等使用Webkit引擎的浏览器 /

-o- / Opera浏览器(早期) /浏览器兼容性问题

-ms- / IE /

3。块属性标签float后，又有横行的margin的情况下，IE浏览器margin加倍的问题

设置为float的p在IE下设置的margin会加倍。这是一个IE6都存在的bug。解决方案是在这个p里面加上display:inlin。

4。设置较小高度标签（小于一般10px），在IE6，IE7，遨游中高度超出自己设置高度

可以通过给高出的标签设置overflow:hidden

或设置行高line-height小于你设置的高度

5。行内属性标签，设置display:black后采用float布局，又有横行的margin的情况下，IE6间距bug

IE6里的间距比超过设置的间距，可以通过在display:block;后面加入display:inline;display:table;

6。IE浏览器p最小高度和宽度的问题 浏览器兼容性问题

加宽高，并且宽高加auto

7。超链接访问过hover样式就不出现的问题

被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决技巧是改变CSS属性的排列顺序: L-V-H-A

a:link{}>a:visited{}>a:hover{}>a:active{}

8。图片默认有间距

几个img标签放在一起的时候，有些浏览器会有默认的间距，通配符清除间距也不起作用。

可以通过使用float属性为img布局(所有图片左浮)

9。 css hack解决浏览器兼容性

不同浏览器，识别不同的样式，css hack本身就是处理浏览器兼容的

二、js兼容

1。 事件绑定

IE: dom。attachEvent();

标准浏览器： dom。addEventListener(‘click',function(event){},false);

var x = document。getElementById("myBtn");

if (x。addEventListener) {   //所有主流浏览器，ie9+

    x。addEventListener("click", myFunction);

} else if (x。attachEvent) {      // IE 8 及更早 IE 版本

    x。attachEvent("onclick", myFunction);

}

2。event事件对象问题

    document。οnclick=function(ev){//谷歌火狐的写法，IE9以上支持，往下不支持；

        var e=ev;

        console。log(e);

    }

    document。οnclick=function(){//谷歌和IE支持，火狐不支持；

        var e=event;

        console。log(e);

    }

    document。οnclick=function(ev){//兼容写法；

        var e=ev||window。event;

        var mouseX=e。clientX;//鼠标X轴的坐标

        var mouseY=e。clientY;//鼠标Y轴的坐标

}

3。 event。srcElement(事件源对象)问题

IE： event对象有srcElement属性，但是没有target属性；