一、前言
在前端開發(fā)的過程中我們不可避免的會遇到瀏覽器兼容性問題族奢，這也是我們必須要解決的問題姥闭。首先來了解一下為什么存在瀏覽器兼容性問題。
現(xiàn)在的市場上有很多種類的瀏覽器越走，不同種類的瀏覽器的內核也不盡相同棚品，所以不同瀏覽器對代碼的解析會存在差異，這就導致對頁面渲染效果不統(tǒng)一的問題廊敌。-
市場上常見的瀏覽器內核主要有四種：Webkit內核铜跑、Presto內核、Trident內核骡澈、Gecko內核锅纺。
image.png
(emmm自己做的表格，不知道為啥有點歪...)
二肋殴、常見的瀏覽器兼容性問題以及解決辦法
- 常見的瀏覽器兼容性可分為三類：
①HTML兼容
②CSS兼容
③JavaScript兼容
對于HTML兼容囤锉，這是由于低版本瀏覽器不能識別一些高版本瀏覽器使用的標簽，從而導致不能解析护锤，比如HTML5新增的標簽官地。這類兼容性問題比較容易處理。
1. CSS兼容
問題一：不同瀏覽器的標簽默認的外補丁(margin)和內補丁(padding)不同
問題表現(xiàn)：標簽在不加樣式的情況下外補丁(margin)和內補丁(padding)存在差異
解決方法：在css里添加如下代碼
*{
margin: 0;
padding: 0;
}
問題二：IE6下margin值雙倍邊距問題
問題表現(xiàn)：IE6下元素浮動之后margin值變成雙倍
解決方法：將元素轉為行內屬性
{
display: inline;
}
問題三：height值設置過小問題
問題表現(xiàn)：IE6烙懦、IE7下設置標簽高度小于10px驱入，存在超出已設置的高度的問題
解決方法：為超出高度的元素添加溢出部分隱藏
{
overflow: hidden;
}
問題四：標簽min-height屬性不兼容問題
問題表現(xiàn)：min-height屬性本身就是一個不兼容CSS屬性，所以min-height不能很好地被各個瀏覽器兼容
解決方法：例如要為一個標簽設置最小高度為200px
{
min-height: 200px;
height: auto!important;
height: 200px;
overflow: visible;
}
問題五：圖片元素img下默認有間距
問題表現(xiàn)：IE6下圖片元素img出現(xiàn)多余空白
解決方法：圖片使用float屬性
問題六：opacity多瀏覽器透明度兼容問題
問題表現(xiàn)：opacity是css3里的屬性氯析，只有部分瀏覽器支持
解決方法：使用各個瀏覽器的私有屬性以支持opacity
{
filter: alpha(opacity=50);/*IE*/
-moz-opacity: 0.5;/*老版Mozilla*/
-khtml-opacity: 0.5;/*老版Safari*/
opacity: 0.5;
}
問題七：Firefox和Chrome不兼容cursor:hand
解決方法：cursor:poniter兼容所有瀏覽器
問題八：IE6的3px Bug
問題表現(xiàn)：一個標簽浮動亏较，另一個不浮動的元素自然上浮與之靠近出現(xiàn)3px間距
解決方法：對浮動的標簽設置_margin-right: -3px;
{
_margin-right: -3px;
}
對于其他的一些 CSS兼容性問題，在以后遇到時會繼續(xù)補充掩缓。
三宴杀、Tip
對于JavaScript兼容性問題，會再單獨寫一篇總結拾因，否則篇幅太長不好閱讀旺罢。
