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

一、css兼容：

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

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

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

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

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

哪些css3属性需要加：

定义关键帧动画 @keyframes
css3中的变形（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，遨游中高度超出自己设置高度
问题症状： 设置div高度小于10px，IE6、7和遨游里div的高度，超出自己设置的10px.

解决方案： 

1. 给超出高度的标签设置overflow:hidden;
2. 或者设置行高line-height 小于你设置的高度。

5. 图片默认有间距

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

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

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

7. css hack解决浏览器兼容

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

 例如：

+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

跨浏览器兼容解决方法：