市场上浏览器种类很多，不同浏览器的内核也不尽相同，所以各个浏览器对网页的解析存在一定的差异。
浏览器内核主要分为两种，一是渲染引擎，另一个是js 引擎，内核更加倾向于说渲染引擎。
常见的兼容性问题：
（一）不同浏览器的标签默认的外补丁( margin )和内补丁(padding)差异较大。
解决方案： css 里增加通配符 * { margin: 0; padding: 0; }
（二）img图片有默认的间距？ 及时你在style里面添加了 通配符:{margin:0;padding:0;也无济于事}
解决方案：使用float 为img 布局
（三）IE9以下的浏览器不能使用opacity （opacity意为不透明）
解决方案：IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。FF：opacity:0.6。
（四）cursor:hand 显示手型在safari 上不支持 safari也就是苹果浏览器
解决方案：统一使用 cursor:pointer
（五）两个块级元素，父元素设置了overflow:auto；子元素设置了position:relative ;且高度大于父元素，在IE6、IE7会被隐藏而不是溢出；
解决方案：父级元素设置position:relative
（六）innerText在IE中能正常工作，但在FireFox中却不行. 需用textContent。
解决方案:
if(navigator.appName.indexOf("Explorer") > -1){
document.getElementById('element').innerText = "my text";
} else{
document.getElementById('element').textContent = "my text";
}
（七）FF和IE的盒子（box）模型解释不一致导致相差2px
box.style{width:100;border1px;}
ie理解为box.width =100
ff理解为box.width =100 + 1*2 = 102 //加上边框2px
解决方案：div{margin:30px!important;margin:28px;}
注意这两个margin的顺序一定不能写反， IE不能识别!important这个属性，但别的浏览器可以识别。所以在IE下其实解释成这样：div{maring:30px;margin:28px}
重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important;
（八）Div的垂直居中问题
vertical-align:middle; 将行距增加到和整个DIV一样高：line-height:200px;然后插入文字，就垂直居中了。缺点是要控制内容不要换行。
（九）元素水平居中问题
FF: margin:0auto;
IE: 父级{ text-align:center; }
(十)居中问题？
div里面的文字内容，IE默认是居中显示的，但是FF是左边对齐显示
解决方案：添加一个margin 0 aotu；
后续会继续更新.....