| |
其實，以前從來沒有接觸過CSS相關(guān)的內(nèi)容，都是在做業(yè)務(wù)的編程，從來沒想過前臺頁面的設(shè)計也能如此復(fù)雜。這次項目的開過過程中，作為CSS菜鳥的我也接觸到CSS的相關(guān)設(shè)計。所出現(xiàn)的低級問題和浪費很多時間的狀況也層出不窮，所以通過各方搜索和自己的實際學(xué)習(xí)中總結(jié)出幾點IE和Firefox對CSS的區(qū)別，給大家借鑒。
首先，大家都知道，IE和Firefox針對于核模型的解析就不一樣，自然會產(chǎn)生很多讓人撓頭的問題，以下就是我的經(jīng)驗總結(jié)：
1.高度的區(qū)別
IE:在沒有定義高度時候，將根據(jù)內(nèi)容高度的變化，包括未定義高度的圖片內(nèi)容；
在定義了高度時候，當(dāng)內(nèi)容超過高度時，將使用實際內(nèi)容的高度。
FF:在沒有定義高度時，如果內(nèi)容中包括了圖片內(nèi)容，MF的高度解析是根據(jù)印刷標(biāo)準(zhǔn)，這樣就會造成和實際內(nèi)容高度不符合的情況；
在當(dāng)定義了高度，但是內(nèi)容超過高度時，內(nèi)容會超出定義的高度，但是區(qū)域使用的樣式不會變化，造成樣式錯位。
建議：在可以確定內(nèi)容高度的情況下最好定義高度，如果真的沒有辦法定義高度，盡量不用使用邊框樣式。
2.寬度的區(qū)別
IE:內(nèi)容寬度=您定義的容器寬度(Internet Explorer ’width’)-padding寬度-border寬度。
IE中定義 width:100px;padding:5px 的話，所顯示的寬度就是100px。
FF:容器占的寬度=內(nèi)容寬度+padding寬度+border寬度。
Firefox中定義 width:100px;padding:5px 的話，所顯示的寬度就是105px。
建議：使用 !important；但是，!important一定要在前面。
如：width:95px !important;width:100px;padding:5px;。
注：高度亦是如此！
3.浮動（float）的區(qū)別
�。�1）空格處理
IE:對于DIV并排時候使用float關(guān)鍵字時候，IE對塊與塊之間的空格是處理的。
FF:對于DIV并排時候使用float關(guān)鍵字時候，F(xiàn)irefox對塊與塊之間的空格是不處理的。
建議：經(jīng)常發(fā)現(xiàn)使用float關(guān)鍵字時候在Firefox顯示正常，但是在IE中會出現(xiàn)空格，就是這個原因；
避免在div連div時候添加空格或者回車，也即是一個div緊接這一個div寫；
或者，將div放入li中進行處理，這樣就不會有空格的問題。
�。�2）Margin加倍
IE:在使用float的情況下，IE的margin加倍。
FF:正常顯示。
建議：針對IE，添加display:inline;
<div id=”float”></div>相應(yīng)的css為
#float{
float:left;
margin:5px;/*IE下理解為10px*/
display:inline;/*IE下再理解為5px*/
}
4.鼠標(biāo)位置處理
IE:獲取事件鼠標(biāo)位置時，IE用的是event.x和event.y，并且值在不加單位的情況下可以直接使用,IE提供默認(rèn)單位；
div.style.left = event.x
div.style.top = event.y
此時，div顯示的位置為鼠標(biāo)的位置。
FF:獲取事件鼠標(biāo)位置時，F(xiàn)irefox用的是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這些不同，解決方案可以有多種，但是當(dāng)問題直接解析模型的不同的時候，我們只能分別針對瀏覽器的不同而單獨寫針對于瀏覽器的方法。這也是寫精致CSS所必須懂得的。
以上純屬個人愚見，希望對新學(xué)CSS的同學(xué)有所幫助。 |
|
|
| 【收藏】【打印】【進入論壇】 |
|
|
|
|
| |
|
|
|
