不同浏览器的内核不尽相同，所以各个浏览器对网页的解析存在一定的差异。
浏览器内核主要分为两种，一是渲染引擎，另一个是js 引擎
浏览器兼容性问题一般指：css兼容、js兼容

浏览器内核（渲染引擎）

Chrome谷歌	之前Webkit，已改Blink内核
FireFox火狐	Gecko
Safari苹果	Webkit
IE	Trident
Opera欧朋	现已改用Google Chrome的Blink内核

一、css兼容：

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

解决方案：把所有标签的margin和padding设置为0即可

CSS里 *{margin:0;padding:0;} 

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

-moz-     /* 火狐浏览器 /
-webkit-        / Safari, 谷歌浏览器等使用Webkit引擎的浏览器 /
-o-                 / Opera浏览器(早期) /
-ms-               / IE */

哪些css3属性需要加：

定义关键帧动画 @keyframescss3中的变形（transform）、过渡(transtion)、动画(animation)border-radius 圆角box-shadow 盒子阴影flex 弹性布局....

例如：

-moz-border-radius: 50%;//火狐浏览器下生效-webkit-border-radius: 50%;//谷歌浏览器下生效-o-border-radius: 50%;// Opera浏览器下生效-ms-border-radius: 50%;//IE浏览器下生效

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

快属性标签： Div,p,h1~h6,ol,ul,li等

解决方案：将块级元素display设置为inline；

4. 设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度
问题症状： 设置p高度小于10px，IE6、7和遨游里p的高度，超出自己设置的10px.

解决方案： 

给超出高度的标签设置overflow:hidden;

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

5. 图片默认有间距

解决方案： 使用float属性为img布局(所有图片左浮)

6.图片加a标签在IE9中会有边框

解决方案：img{border: none;}

7. css hack解决浏览器兼容

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

hack

写法

实例

IE6(S)

IE6(Q)

IE7(S)

IE7(Q)

IE8(S)

IE8(Q)

IE9(S)

IE9(Q)

IE10(S)

IE10(Q)

*

*color

青色

Yes

Yes

Yes

Yes

No

Yes

No

Yes

N

Y

+

+color

绿色

Yes

Yes

Yes

Yes

No

Yes

No

Yes

N

Y

-

-color

黄色

Yes

Yes

No

No

No

No

No

N

N

N

_

_color

蓝色

Yes

Yes

No

Yes

No

Yes

No

Yes

N

N

#

#color

紫色

Yes

Yes

Yes

Yes

No

Yes

No

Yes

N

Y

\0

color:red\0

红色

No

No

No

No

Yes

No

Yes

No

Y

N

\9\0

color:red\9\0

粉色

No

No

No

No

No

No

Yes

No

Y

N

!important

color:blue !important;color:green;

棕色

No

No

Yes

No

Yes

No

Yes

No

Y

Y

 例如：

+background-color:pink; + 只有IE8(S)、IE9(S)不能识别

8. IE9以下浏览器不能使用opacity（透明度）

解决办法：{opacity: 0.5;filter: alpha(opacity = 50);filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50);}。 

9.两个块级元素，父元素设置了overflow:auto，子元素设置了position:relative ，且高度大于父元素，在IE6、IE7会被隐藏而不是溢出；

解决办法：父级元素设置position:relative。

二、js兼容

1. 事件绑定

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

2. event事件对象问题

document.onclick=function(ev){//谷歌火狐的写法，IE9以上支持，往下不支持；var e=ev;}document.onclick=function(){//谷歌和IE支持，火狐不支持；var e=event;}document.onclick=function(ev){//兼容写法；var e=ev||window.event;var mouseX=e.clientX;//鼠标X轴的坐标var mouseY=e.clientY;//鼠标Y轴的坐标}

3. event.srcElement(事件源对象)问题
IE： event对象有srcElement属性，但是没有target属性；
Firefox: event对象有target属性，但是没有srcElement属性。
解决方法：

srcObj = event.srcElement?event.srcElement:event.target;

4. 获取元素的非行间样式值：

IE: dom.currentStyle[‘width’] 获取元素高度
标准浏览器： window.getComputedStyle(obj, null)['width'];

5.跨浏览器兼容解决方法：

function getStyle(obj,attr){if(obj.currentStyle){//兼容IEobj.currentStyle[attr];return obj.currentStyle[attr];}else{//非IE，return window.getComputedStyle(obj, null)[attr]; }}

6. 阻止事件冒泡传播：

document.onclick=function(e){var e=e||window.event;if (e.stopPropagation) {e.stopPropagation();//W3C标准}else{e.cancelBubble=true;//IE....}}

7. 阻止事件默认行为：

document.onclick=function(e){var e=e||window.event;if (e.preventDefault) {e.preventDefault();//W3C标准}else{e.returnValue='false';//IE..}}

8. ajax兼容问题

IE： ActiveXObject
其他： xmlHttpReuest

跨浏览器兼容解决方法：

<script>window.onload = function(){var oBtn = document.getElementById('btn');oBtn.onclick = function(){//1.创建ajax对象//只支持非IE6浏览器var oAjax = null;if(window.XMLHttpRequest){oAjax = new XMLHttpRequest();//alert(new XMLHttpRequest());}else{//只支持IE6浏览器oAjax = new ActiveXObject("Microsoft.XMLHTTP");}//2.连接服务器,这里加个时间参数,每次访问地址都不一样,浏览器就不用浏览器里的缓冲了,但//但服务器那端是不解析这个时间的oAjax.open("get","a.txt?t=" + new Date().getTime(),true);//3.发送oAjax.send(null);//4.接受信息oAjax.onreadystatechange = function(){//浏览器与服务器之间的交互,进行到哪一步了,当等于4的时候,代表读取完成了if(oAjax.readyState==4){//状态码,只有等于200,代表接受完成,并且成功了if(oAjax.status==200){alert("成功" + oAjax.responseText);}else{alert("失败");}}};};};</script>