HOBALL 筆記簿

October 21, 2008

IE和FIREFOX在解析CSS方面的區別

Filed under: HTML+CSS — Tags: , , , — hoball @ 1:06 pm

轉載自http://blog.csdn.net/jawsy/archive/2008/09/19/2949874.aspx

1. 對高度的解析
IE:將根據內容的高度變化,包括未定義高度的圖片內容,即使定義了高度,當內容超過高度時,將使用實際高度
Firefox:沒有定義高度時,如果內容中包括了圖片內容,Firefox的高度解析是根據印刷標準,這樣就會造成和實際內容高度不符合的情況;當定義了高度,但是內容超過高度時,內容會超出定義的高度,但是區域使用的樣式不會變化,造成樣式錯位。
結論:大家在可以確定內容高度的情況下最好定義高度,如果真的沒有辦法定義高度,最好不用使用邊框樣式,否則樣式肯定會出現混亂!

3.佈局問題
當你在寫css的時候,特別是用float: left(或right)排列一竄圖片時,會發現在firefox裡面正常而IE裡面有問題。無論你用margin:0,還是border: 0來約束,都無濟於事。
其實這裡還有另外一個問題,就是IE對於空格的處理,firefox是忽略的而IE對於塊與塊之間的空格是處理的。也就是說一個div結束後要緊接著一個div寫,中間不要有回車或者空格。不然也許會有問題,比如3px的偏差,而且這個原因很難發現。
非常不走運的是我又碰到了這樣的問題,多個img標籤連著,然後定義的float: left,希望這些圖片可以連起來。但是結果在firefox裡面正常而IE裡面顯示的每個img都相隔了3px。我把標籤之間的空格都刪除都沒有作用。
後來的解決方法是在img外面套li,並且對li定義margin: 0,這樣就解決了IE和firefox的顯示偏差。IE對於一些模型的解釋會產生很多錯誤問題,只有多多嘗試才能發現原因。
這只是一些簡單的區別,在做佈局和CSS設計時候可以綜合考慮,但最為有效與簡單的解決兼容問題還是用TABLE表格,表格在兼容性方面有著不錯的表現.

4.鼠標樣式
firefox不支持hand,但ie支持pointer
解決方法: 統一使用pointer

5. padding 問題
padding 5px 4px 3px 1px FireFox無法解釋簡寫,
必須改成 padding-top:5px; padding-right:4px; padding-bottom:3px; padding-left:1px;

6. 消除ul、ol等列表的縮進
消除ul、ol等列表的縮進樣式應寫成:list-style:none;margin:0px;padding:0px;
其中margin屬性對IE有效,padding屬性對FireFox有效

7. CSS透明
IE:filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
FF:opacity:0.6。

8. CSS圓角
IE:不支持圓角。
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;。

9. 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;

10. 濾鏡
IE中支持使用濾鏡,而Firefox中不支持.

11. 禁止選取網頁內容:
在IE中一般用js:obj.onselectstart=function(){return false;};
而firefox用CSS:-moz-user-select:none;

Leave a Comment »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Blog at WordPress.com.

%d bloggers like this: