整理了一些瀏覽器兼容的問題,希望對大家有所幫助
一、瀏覽器兼容性問題總結(jié)
? ? ? ?1、雙倍浮動邊距：原因：多個(gè)并列浮動元素設(shè)置了左或右邊界值（x），ie6下第一個(gè)浮動元素的左或右的邊界值為2倍(2x);
? ? ? ? ? ? 解決：為第一個(gè)浮動元素添加display:inline;樣式；
? ? ? ?2、高度不能自適應(yīng)：原因：多個(gè)并列浮動元素的父級高度不能被撐開。
? ? ? ? ? ? 解決：在最后一個(gè)浮動元素后添加.clear {clear:both;}
? ? ? ?3、上下邊界不被識別：
? ? ? ? ? ? 原因：父級元素未指定高度，margin-top和margin-bottom解析錯(cuò)誤
? ? ? ? ? ? 解決：在該元素的父一級元素上添加樣式：overflow:auto; display:inline-block;備注：當(dāng)元素被設(shè)置成inline-block時(shí)候，最后給該元素指定寬度；
? ? ? ?4、IE6不識別微型高度：
? ? ? ? ? ?原因：IE6不能識別低于當(dāng)前字高的高度
? ? ? ? ? ?解決：為該元素設(shè)置font-size:0 / overflow:hidden;
? ? ? ? 5、IE6鏈接偽類的問題：
? ? ? ? ? ? 原因：IE6不識別P:hover,只能識別a:hover?
? ? ? ? ? ? 解決：用a:hover替換之。
? ? ? ? 6、IE6、7階梯列表問題：
? ? ? ? ? ? 原因：浮動元素未指定寬度；
? ? ? ? ? ? 解決：為浮動元素指定確定寬度
二、兼容（HACK）技術(shù)
? ? ? ? ?1、屬性過濾：
#nav {?
_margin:100px; /*只IE6識別*/
?*margin:100px; /*只IE6、IE7識別*/?
margin:100px\0/; /*只IE8識別*/
?}
? ? ? ? ? ?2、選擇器過濾：
* 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;}
?}
備注：關(guān)于Chrome中文版12號以下的字體不識別，解決方案，設(shè)置樣式如下：
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; }?
}
三、注意事項(xiàng)
記得清除漂浮。(在具有float元素的容器底部加入清除漂浮)
漂浮元素盡量給一個(gè)確定的寬度。
盡量使用padding代替margin。
若同時(shí)有float及margin，加入display:inline。
盡量避免使用絕對定位進(jìn)行布局；若使用，需明確指定z-index, top, left；
盡量避免使用半透明png圖片(PNG-24)；若使用，用PNG修復(fù)補(bǔ)丁修復(fù)之；
若出現(xiàn)寬度被撐開現(xiàn)象，設(shè)置overflow:hidden;
若出現(xiàn)莫名padding，設(shè)置font-size:0及overflow:hidden;
四、其他技巧
1、FF下給 div 設(shè)置 padding 后會導(dǎo)致 width 和 height 增加, 但I(xiàn)E不會.(可用!important解決)
2、 居中問題.
a).垂直居中.將 line-height 設(shè)置為 當(dāng)前 div 相同的高度, 再通過 vertical-align: middle.( 注意內(nèi)容不要換行.)
b).水平居中. margin: 0 auto;(當(dāng)然不是萬能)
3、若需給 a 標(biāo)簽內(nèi)內(nèi)容加上 樣式, 需要設(shè)置 display: block;(常見于導(dǎo)航標(biāo)簽)
4、FF 和 IE 對 BOX 理解的差異導(dǎo)致相差 2px 的還有設(shè)為 float的div在ie下 margin加倍等問題.
5、ul 標(biāo)簽在 FF 下面默認(rèn)有 list-style 和 padding . 最好事先聲明, 以避免不必要的麻煩. (常見于導(dǎo)航標(biāo)簽和內(nèi)容列表)
6、作為外部 wrapper 的 div 不要定死高度, 最好還加上 overflow: hidden.以達(dá)到高度自適應(yīng).
7、關(guān)于手形光標(biāo). cursor: pointer. 而hand 只適用于 IE.
后補(bǔ)
1、DOCTYPE 影響 CSS 處理?
2、FF: 設(shè)置 padding 后， div 會增加 height 和 width， 但 IE 不會， 故需要用 !important 多設(shè)一個(gè) height 和 width?
3、FF: 支持 !important， IE 則忽略， 可用 !important 為 FF 特別設(shè)置樣式?
4、div 的垂直居中問題: vertical-align:middle; 將行距增加到和整個(gè)DIV一樣高 line-height:200px; 然后插入文字，就垂直居中了。缺點(diǎn)是要控制內(nèi)容不要換行?
5、在mozilla firefox和IE中的BOX模型解釋不一致導(dǎo)致相差2px解決方法：
?div{margin:30px!important;margin:28px;}?
注意這兩個(gè)margin的順序一定不能寫反，!important這個(gè)屬性IE不能識別，但別的瀏覽器可以識別。所以在IE下其實(shí)解釋成這樣：
?div{maring:30px;margin:28px}?
重復(fù)定義的話按照最后一個(gè)來執(zhí)行，所以不可以只寫margin:XXpx!important;?
瀏覽器差異?
1、ul和ol列表縮進(jìn)問題 消除ul、ol等列表的縮進(jìn)時(shí)，樣式應(yīng)寫成：
list-style:none;margin:0px;padding:0px;?
其中margin屬性對IE有效，padding屬性對FireFox有效。?
[注]經(jīng)驗(yàn)證，在IE中，設(shè)置margin:0px可以去除列表的上下左右縮進(jìn)、空白以及列表編號或圓點(diǎn)，設(shè)置padding對樣式?jīng)]有影響；在 Firefox 中，設(shè)置margin:0px僅僅可以去除上下的空白，設(shè)置padding:0px后僅僅可以去掉左右縮進(jìn)，還必須設(shè)置list- style:none才能去除列表編號或圓點(diǎn)。也就是說，在IE中僅僅設(shè)置margin:0px即可達(dá)到最終效果，而在Firefox中必須同時(shí)設(shè)置margin:0px、 padding:0px以及l(fā)ist-style:none三項(xiàng)才能達(dá)到最終效果。
?2、CSS透明問題
?IE：
filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
?FF：
opacity:0.6。
?[注] 最好兩個(gè)都寫，并將opacity屬性放在下面。?
3、CSS圓角問題
?IE：ie7以下版本不支持圓角。?
FF： -moz-border-radius:4px，或者-moz-border-radius-topleft:4px;-moz- border- radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz- border- radius- bottomright:4px;。?
[注] 圓角問題是CSS中的經(jīng)典問題，建議使用JQuery框架集來設(shè)置圓角，讓這些復(fù)雜的問題留給別人去想吧。不過jQuery的圓角只看到支持整個(gè)區(qū)域的圓角，沒有支持邊框的圓角，不過這個(gè)邊框的圓角可以通過一些簡單的手段來實(shí)現(xiàn)，下次有機(jī)會介紹下。?
4、cursor:hand VS cursor:pointer 問題說明：firefox不支持hand，但ie支持pointer ，兩者都是手形指示。?
解決方法：統(tǒng)一使用pointer。
?5、字體大小定義不同 對字體大小small的定義不同，F(xiàn)irefox中為13px，而IE中為16px，差別挺大。
?解決方法：使用指定的字體大小如14px。 并列排列的多個(gè)元素（圖片或者鏈接）的div和div之間，代碼中的空格和回車在firefox中都會被忽略，而IE中卻默認(rèn)顯示為空格（約3px）。?
6、CSS雙線凹凸邊框
?IE：border:2px outset;。
?FF： -moz-border-top-colors: #d4d0c8 white;-moz-border-left-colors: #d4d0c8 white;-moz-border-right-colors:#404040 #808080;-moz-border-bottom-colors:#404040 #808080;?
瀏覽器bug?
IE的雙邊距bug 設(shè)置為float的div在ie下設(shè)置的margin會加倍。這是一個(gè)ie6都存在的bug。
?解決方案：在這個(gè)div里面加上display:inline;?
例如： <#div id=”imfloat”>?
相應(yīng)的css為?
以下為引用的內(nèi)容： 復(fù)制代碼代碼如下:
#IamFloat{
float:left;
margin:5px;/*IE下理解為10px*/
display:inline;/*IE下再理解為5px*/
}
#IamFloat{
float:left;
margin:5px;/*IE下理解為10px*/
display:inline;/*IE下再理解為5px*/
}?
關(guān)于CSS中的問題實(shí)在太多了，甚至同樣的CSS定義在不同的頁面標(biāo)準(zhǔn)中的顯示效果都是不一樣的。一個(gè)合乎發(fā)展的建議是，頁面采用標(biāo)準(zhǔn)XHTML標(biāo)準(zhǔn)編寫，較少使用table，CSS定義盡量依照標(biāo)準(zhǔn)DOM，同時(shí)兼顧IE、Firefox、Opera等主流瀏覽器。很多情況下，F(xiàn)F和 Opera的CSS解釋標(biāo)準(zhǔn)更貼近CSS標(biāo)準(zhǔn)，也更具有規(guī)范性。?
