微信ID：WEB_wysj(點擊關注) ◎ ◎ ◎ ◎ ◎◎◎◎◎一┳═┻︻▄
（頁底留言開放，歡迎來吐槽）
● ● ●
瀏覽器兼容性問題是指因為不同的瀏覽器對同一段CSS代碼解析不同導致頁面顯示效果不統一的情況。一般情況下，我們希望用戶無論使用什么瀏覽器來查看網頁效果都應該是一樣的。瀏覽器的兼容性問題是Web前端開發人員經常會碰到的和必須要解決的問題。下面PHP程序員雷雪松整理出來了史上最全的瀏覽器兼容性問題和解決方案。
一、瀏覽器兼容性問題總結
1、雙倍浮動邊距：
原因：多個并列浮動元素設置了左或右邊界值（x），ie6下第一個浮動元素的左或右的邊界值為2倍(2x);
解決：為第一個浮動元素添加display:inline;樣式；
2、高度不能自適應：
原因：多個并列浮動元素的父級高度不能被撐開。
解決：在最后一個浮動元素后添加
.clear {clear:both;}3、上下邊界不被識別：
原因：父級元素未指定高度，margin-top和margin-bottom解析錯誤
解決：在該元素的父一級元素上添加樣式：overflow:auto; display:inline-block;
備注：當元素被設置成inline-block時候，最后給該元素指定寬度；
4、IE6不識別微型高度：
原因：IE6不能識別低于當前字高的高度
解決：為該元素設置font-size:0 / overflow:hidden;
5、IE6鏈接偽類的問題：
原因：IE6不識別P:hover,只能識別a:hover
解決：用a:hover替換之。
6、IE6、7階梯列表問題：
原因：浮動元素未指定寬度；
解決：為浮動元素指定確定寬度
二、兼容（HACK）技術
1、屬性過濾：
1 2 3 4 5 | #nav { _margin:100px; /*只IE6識別*/ *margin:100px; /*只IE6、IE7識別*/ margin:100px\0/; /*只IE8識別*/ } |
2、選擇器過濾：
1 2 3 4 5 6 7 8 9 10 | * 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號以下的字體不識別，解決方案，設置樣式如下：
1 2 3 4 5 | 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; } } |
3、樣式表過濾
1 2 3 4 5 6 |
三、注意事項
記得清除漂浮。(在具有float元素的容器底部加入清除漂浮)
漂浮元素盡量給一個確定的寬度。
盡量使用padding代替margin。
若同時有float及margin，加入display:inline。
盡量避免使用絕對定位進行布局；若使用，需明確指定z-index, top, left；
盡量避免使用半透明png圖片(PNG-24)；若使用，用PNG修復補丁修復之；
若出現寬度被撐開現象，設置overflow:hidden;
若出現莫名padding，設置font-size:0及overflow:hidden;
四、其他技巧
1、FF下給 div 設置 padding 后會導致 width 和 height 增加, 但IE不會.(可用!important解決)
2、 居中問題.
a).垂直居中.將 line-height 設置為 當前 div 相同的高度, 再通過 vertical-align: middle.( 注意內容不要換行.)
b).水平居中. margin: 0 auto;(當然不是萬能)
3、若需給 a 標簽內內容加上 樣式, 需要設置 display: block;(常見于導航標簽)
4、FF 和 IE 對 BOX 理解的差異導致相差 2px 的還有設為 float的div在ie下 margin加倍等問題.
5、ul 標簽在 FF 下面默認有 list-style 和 padding . 最好事先聲明, 以避免不必要的麻煩. (常見于導航標簽和內容列表)
6、作為外部 wrapper 的 div 不要定死高度, 最好還加上 overflow: hidden.以達到高度自適應.
7、關于手形光標. cursor: pointer. 而hand 只適用于 IE.
干貨！免費領取騰訊高級講師網頁設計教程
點我領取
???
關注網頁設計自學平臺，99%的努力都在這里
▼無法識別二維碼可以點「閱讀原文」噢！
推薦閱讀：華媒網