日本免费全黄少妇一区二区三区-高清无码一区二区三区四区-欧美中文字幕日韩在线观看-国产福利诱惑在线网站-国产中文字幕一区在线-亚洲欧美精品日韩一区-久久国产精品国产精品国产-国产精久久久久久一区二区三区-欧美亚洲国产精品久久久久

  1. 首頁 > 云知道 > >

CSS多瀏覽器兼容性問題及解決方案介紹

云知道


CSS多瀏覽器兼容性問題及解決方案介紹


兼容性處理要點
1、DOCTYPE 影響 CSS 處理
2、FF: 設置 padding 后 ， div 會增加 height 和 width ， 但 IE 不會 ， 故需要用 !important 多設一個 height 和 width
3、FF: 支持 !important ， IE 則忽略 ， 可用 !important 為 FF 特別設置樣式
4、div 的垂直居中問題: vertical-align:middle; 將行距增加到和整個DIV一樣高 line-height:200px; 然后插入文字 ， 就垂直居中了 。缺點是要控制內(nèi)容不要換行
5、在mozilla firefox和IE中的BOX模型解釋不一致導致相差2px解決方法：
div{margin:30px!important;margin:28px;}
注意這兩個margin的順序一定不能寫反 ， !important這個屬性IE不能識別 ， 但別的瀏覽器可以識別 。所以在IE下其實解釋成這樣：
div{maring:30px;margin:28px}
重復定義的話按照最后一個來執(zhí)行 ， 所以不可以只寫margin:XXpx!important;
瀏覽器差異
1、ul和ol列表縮進問題
消除ul、ol等列表的縮進時 ， 樣式應寫成：list-style:none;margin:0px;padding:0px;
其中margin屬性對IE有效 ， padding屬性對FireFox有效 。
[注]經(jīng)驗證 ， 在IE中 ， 設置margin:0px可以去除列表的上下左右縮進、空白以及列表編號或圓點 ， 設置padding對樣式?jīng)]有影響;在 Firefox 中 ， 設置margin:0px僅僅可以去除上下的空白 ， 設置padding:0px后僅僅可以去掉左右縮進 ， 還必須設置list- style:none才 能去除列表編號或圓點 。也就是說 ， 在IE中僅僅設置margin:0px即可達到最終效果 ， 而在Firefox中必須同時設置margin:0px、 padding:0px以及l(fā)ist-style:none三項才能達到最終效果 。
2、CSS透明問題
IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60) 。
FF：opacity:0.6 。
[注] 最好兩個都寫 ， 并將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框架集來設置圓角 ， 讓這些復雜的問題留給別人去想吧 。不過jQuery的圓角只看到支持整個區(qū)域的圓角 ， 沒有支持邊框的圓角 ， 不過這個邊框的圓角可以通過一些簡單的手段來實現(xiàn) ， 下次有機會介紹下 。
4、cursor:hand VS cursor:pointer
問題說明：firefox不支持hand ， 但ie支持pointer ， 兩者都是手形指示 。
解決方法：統(tǒng)一使用pointer 。
5、字體大小定義不同
對字體大小small的定義不同 ， Firefox中為13px ， 而IE中為16px ， 差別挺大 。
解決方法：使用指定的字體大小如14px 。
并列排列的多個元素(圖片或者鏈接)的div和div之間 ， 代碼中的空格和回車在firefox中都會被忽略 ， 而IE中卻默認顯示為空格(約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
1、IE的雙邊距bug
設置為float的div在ie下設置的margin會加倍 。這是一個ie6都存在的bug 。
解決方案：在這個div里面加上display:inline;
例如：
<#div id=”imfloat”>
相應的css為
以下為引用的內(nèi)容：
代碼如下:
#IamFloat{
float:left;
margin:5px;/*IE下理解為10px*/
display:inline;/*IE下再理解為5px*/
}
#IamFloat{
float:left;
margin:5px;/*IE下理解為10px*/
display:inline;/*IE下再理解為5px*/
}

推薦閱讀