市場上瀏覽器種類很多，不同瀏覽器的內核也不盡相同，所以各個瀏覽器對網頁的解析存在一定的差異。
瀏覽器內核主要分爲兩種，一是渲染引擎，另一個是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；
後續會繼續更新.....