史上最全的瀏覽器兼容性問題和解決方案

瀏覽器兼容性問題是指由於不一樣的瀏覽器對同一段CSS代碼解析不一樣致使頁面顯示效果不統一的狀況。通常狀況下，咱們但願用戶不管使用什麼瀏覽器來查看網頁效果都應該是同樣的。瀏覽器的兼容性問題是Web前端開發人員常常會碰到的和必需要解決的問題。下面PHP程序員雷雪松整理出來了史上最全的瀏覽器兼容性問題和解決方案。

1、瀏覽器兼容性問題總結

一、雙倍浮動邊距：
緣由：多個並列浮動元素設置了左或右邊界值（x），ie6下第一個浮動元素的左或右的邊界值爲2倍(2x);
解決：爲第一個浮動元素添加display:inline;樣式；

二、高度不能自適應：
緣由：多個並列浮動元素的父級高度不能被撐開。
解決：在最後一個浮動元素後添加<div class=」clear」></div> .clear {clear:both;}

三、上下邊界不被識別：
緣由：父級元素未指定高度，margin-top和margin-bottom解析錯誤
解決：在該元素的父一級元素上添加樣式：overflow:auto; display:inline-block;
備註：當元素被設置成inline-block時候，最後給該元素指定寬度；

四、IE6不識別微型高度：
緣由：IE6不能識別低於當前字高的高度
解決：爲該元素設置font-size:0 / overflow:hidden;

五、IE6連接僞類的問題：
緣由：IE6不識別P:hover,只能識別a:hover
解決：用a:hover替換之。

六、IE六、7階梯列表問題：
緣由：浮動元素未指定寬度；
解決：爲浮動元素指定肯定寬度

 

2、兼容（HACK）技術

一、屬性過濾：

#nav {
_margin:100px; /*只IE6識別*/
*margin:100px; /*只IE六、IE7識別*/
margin:100px\0/; /*只IE8識別*/
}

二、選擇器過濾：

 

* html #nav {margin:10px; border:1px #f00 solid;} /*僅IE6識別*/
*+html #nav {margin:100px; border:1px #f00 solid;} /*僅IE7識別*/
/*針對Firefox*/
@-moz-document url-prefix() {
#nav{ width:200px; }
}
/*針對Safari & Chrome*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
#nav{ width:300px; }
}

備註：關於Chrome中文版12號如下的字體不識別，解決方案，設置樣式以下：二、選擇器過濾：

html {-webkit-text-size-adjust:none;}
/*針對Opera*/
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
#nav{ width:400px; }
}

三、樣式表過濾

<!--[if ie 6]> 僅ie6識別的html <![endif]-->
<!--[if lt ie 6]> 小於ie6識別的html <![endif]-->
<!--[if gt ie 6]> 大於ie6識別的html <![endif]-->
<!--[if ie]> 僅ie識別的html <![endif]-->
<!--[if lte ie 6]> 小於等於ie6識別的html <![endif]-->
<!--[if gte ie 6]> 大於等於ie6識別的html <![endif]-->　　

3、注意事項

記得清除漂浮。(在具備float元素的容器底部加入清除漂浮)
漂浮元素儘可能給一個肯定的寬度。
儘可能使用padding代替margin。
若同時有float及margin，加入display:inline。
儘可能避免使用絕對定位進行佈局；若使用，需明確指定z-index, top, left；
儘可能避免使用半透明png圖片(PNG-24)；若使用，用PNG修復補丁修復之；
若出現寬度被撐開現象，設置overflow:hidden;
若出現莫名padding，設置font-size:0及overflow:hidden;

 

4、其餘技巧

一、FF下給 div 設置 padding 後會致使 width 和 height 增長, 但IE不會.(可用!important解決)二、 居中問題.a).垂直居中.將 line-height 設置爲 當前 div 相同的高度, 再經過 vertical-align: middle.( 注意內容不要換行.)b).水平居中. margin: 0 auto;(固然不是萬能)三、若需給 a 標籤內內容加上 樣式, 須要設置 display: block;(常見於導航標籤)四、FF 和 IE 對 BOX 理解的差別致使相差 2px 的還有設爲 float的div在ie下 margin加倍等問題.五、ul 標籤在 FF 下面默認有 list-style 和 padding . 最好事先聲明, 以免沒必要要的麻煩. (常見於導航標籤和內容列表)六、做爲外部 wrapper 的 div 不要定死高度, 最好還加上 overflow: hidden.以達到高度自適應.七、關於手形光標. cursor: pointer. 而hand 只適用於 IE.