你對IE與Firefox下對CSS解析的區別是否了解,這裡大家分享一下,相信本文介紹一定會讓你有所收獲。
IE與Firefox下對CSS解析的區別
1、對高度的解析
IE:將根據內容的高度變化,包括未定義高度的圖片內容,即使定義了高度,當內容超過高度時,將使用實際高度。
Firefox:沒有定義高度時,如果內容中包括了圖片內容,MF的高度解析是根據印刷標准,這樣就會造成和實際內容高度不符合的情況;當定義了高度,但是內容超過高度時,內容會超出定義的高度,但是區域使用的樣式不會變化,造成樣式錯位。
結論:大家在可以確定內容高度的情況下最好定義高度,如果真的沒有辦法定義高度,最好不用使用邊框樣式,否則樣式肯定會出現混亂!
◆img對象alt和title的解析
alt:當照片不存在或者load錯誤時的提示;
title:照片的tip說明。
在IE中如果沒有定義title,alt也可以作為img的tip使用,但是在MF中,兩者完全按照標准中的定義使用
結論:大家在定義img對象時,最後將alt和title對象都寫全,保證在各種浏覽器中都能正常使用
◆其他的細節差別
當你在寫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對於一些模型的解釋會產生很多錯誤問題,只有多多嘗試才能發現原因。
2、嵌套DIV:父DIV的高度不能根據子DIV自動變化的解決方案
- <dividdivid=”parent”>
- <dividdivid=”content”>< span>div>
- < span>div>
當Content內容多時,即使parent設置了高度100%或auto,在不同浏覽器下還是不能完好的自動伸展。解決方案
- <dividdivid=”parent”>
- <dividdivid=”content”>< span>div>
- <divstyledivstyle=”font:0px/0pxsans-serif;clear:both;display:block”>< span>div>
- < span>div>
在層的最下方產生一個高度為1的空格,可解除這個問題。