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