淺談IE與Firefox對CSS的不同解析

【建站學院文檔】其實，以前從來沒有接觸過CSS相關的內容，都是在做業務的編程，從來沒想過前臺頁面的設計也能如此復雜。這次項目的開過過程中，作為CSS菜鳥的我也接觸到CSS的相關設計。所出現的低級問題和浪費很多時間的狀況也層出不窮，所以通過各方搜索和自己的實際學習中總結出幾點IE和Firefox對CSS的區別，給大家借鑒。

　　首先，大家都知道，IE和Firefox針對于核模型的解析就不一樣，自然會產生很多讓人撓頭的問題，以下就是我的經驗總結：

　　1.高度的區別

　　IE:在沒有定義高度時候，將根據內容高度的變化，包括未定義高度的圖片內容；

　　 在定義了高度時候，當內容超過高度時，將使用實際內容的高度。

　　FF:在沒有定義高度時，如果內容中包括了圖片內容，MF的高度解析是根據印刷標準，這樣就會造成和實際內容高度不符合的情況；

　　在當定義了高度，但是內容超過高度時，內容會超出定義的高度，但是區域使用的樣式不會變化，造成樣式錯位。

　　建議：在可以確定內容高度的情況下最好定義高度，如果真的沒有辦法定義高度，盡量不用使用邊框樣式。

　　2.寬度的區別

　　IE:內容寬度=您定義的容器寬度(Internet Explorer ’width’)-padding寬度-border寬度。

　　 IE中定義 width:100px;padding:5px 的話，所顯示的寬度就是100px。

　　FF:容器占的寬度=內容寬度+padding寬度+border寬度。

　　 Firefox中定義 width:100px;padding:5px 的話，所顯示的寬度就是105px。

　　建議：使用 !important；但是，!important一定要在前面。

　　 如：width:95px !important;width:100px;padding:5px;。

　　 注：高度亦是如此！

　　3.浮動（float）的區別

　　（1）空格處理

　　IE:對于DIV并排時候使用float關鍵字時候，IE對塊與塊之間的空格是處理的。

　　FF:對于DIV并排時候使用float關鍵字時候，Firefox對塊與塊之間的空格是不處理的。

　　建議：經常發現使用float關鍵字時候在Firefox顯示正常，但是在IE中會出現空格，就是這個原因；

　　 避免在div連div時候添加空格或者回車，也即是一個div緊接這一個div寫；

　　 或者，將div放入li中進行處理，這樣就不會有空格的問題。

　　（2）Margin加倍

　　IE:在使用float的情況下，IE的margin加倍。

　　FF:正常顯示。

　　建議：針對IE，添加display:inline;

　　<div id=”float”></div>相應的css為

　　#float{

　　float:left;

　　margin:5px;/*IE下理解為10px*/

　　display:inline;/*IE下再理解為5px*/

　　}

　　4.鼠標位置處理

　　IE:獲取事件鼠標位置時，IE用的是event.x和event.y，并且值在不加單位的情況下可以直接使用,IE提供默認單位；

　　 div.style.left = event.x

　　 div.style.top = event.y

　　 此時，div顯示的位置為鼠標的位置。

　　FF:獲取事件鼠標位置時，Firefox用的是MouseEvent.pageX和MouseEvent.pageY，并且在不加單位的情況下直接賦值后，無效；必須添加單位。

　　 div.style.left = MouseEvent.pageX

　　 div.style.top = MouseEvent.pageY

　　 此時，div顯示的位置為0，0.

　　建議：都添加單位,無論針對IE或者Firefox都有效。

　　 IE：div.style.left = event.x+'px'

　　 div.style.top = event.y+'px'

　　 FF：div.style.left = MouseEvent.pageX+'px'

　　 div.style.top = MouseEvent.pageY+'px'

　　針對IE與Firefox這些不同，解決方案可以有多種，但是當問題直接解析模型的不同的時候，我們只能分別針對瀏覽器的不同而單獨寫針對于瀏覽器的方法。這也是寫精致CSS所必須懂得的。

　　以上純屬個人愚見，希望對新學CSS的同學有所幫助。