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; 然后插入文字,就垂直居中了。缺點是要控制內容不要換行
5、在mozilla firefox和IE中的BOX模型解釋不一致導致相差2px解決方法:
div{margin:30px!important;margin:28px;}
注意這兩個margin的順序一定不能寫反,!important這個屬性IE不能識別,但別的瀏覽器可以識別。所以在IE下其實解釋成這樣:
div{maring:30px;margin:28px}
重復定義的話按照最后一個來執行,所以不可以只寫margin:XXpx!important;
瀏覽器差異
1、ul和ol列表縮進問題
消除ul、ol等列表的縮進時,樣式應寫成:list-style:none;margin:0px;padding:0px;
其中margin屬性對IE有效,padding屬性對FireFox有效。
2、CSS透明問題
IE:filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
FF:opacity:0.6。
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中的經典問題,建議使用JQuery框架集來設置圓角,讓這些復雜的問題留給別人去想吧。不過jQuery的圓角只看到支持整個區域的圓角,沒有支持邊框的圓角,不過這個邊框的圓角可以通過一些簡單的手段來實現,下次有機會介紹下。
4、cursor:hand VS cursor:pointer
問題說明:firefox不支持hand,但ie支持pointer ,兩者都是手形指示。
解決方法:統一使用pointer。
5、字體大小定義不同
對字體大小small的定義不同,Firefox中為13px,而IE中為16px,差別挺大。
解決方法:使用指定的字體大小如14px。
并列排列的多個元素(圖片或者鏈接)的div和div之間,代碼中的空格和回車在firefox中都會被忽略,而IE中卻默認顯示為空格(約3px)。
新聞熱點
疑難解答