天堂在线www天堂中文在线,国产欧美日韩麻豆91

主頁 > 知識庫 > IE和FIREFOX下CSS的區(qū)別與解決方法第1/2頁

IE和FIREFOX下CSS的區(qū)別與解決方法第1/2頁

CSS對瀏覽器器的兼容性具有很高的價(jià)值，通常情況下IE和Firefox存在很大的解析差異，這里介紹一下兼容要點(diǎn)。
對高度的解析
IE：將根據(jù)內(nèi)容的高度變化，包括未定義高度的圖片內(nèi)容，即使定義了高度，當(dāng)內(nèi)容超過高度時(shí)，將使用實(shí)際高度
Firefox：沒有定義高度時(shí)，如果內(nèi)容中包括了圖片內(nèi)容，MF的高度解析是根據(jù)印刷標(biāo)準(zhǔn)，這樣就會造成和實(shí)際內(nèi)容高度不符合的情況；當(dāng)定義了高度，但是內(nèi)容超過高度時(shí)，內(nèi)容會超出定義的高度，但是區(qū)域使用的樣式不會變化，造成樣式錯(cuò)位。
結(jié)論：大家在可以確定內(nèi)容高度的情況下最好定義高度，如果真的沒有辦法定義高度，最好不用使用邊框樣式，否則樣式肯定會出現(xiàn)混亂！

img對象alt和title的解析
alt：當(dāng)照片不存在或者load錯(cuò)誤時(shí)的提示；
title：照片的tip說明。
在IE中如果沒有定義title，alt也可以作為img的tip使用，但是在MF中，兩者完全按照標(biāo)準(zhǔn)中的定義使用

結(jié)論：大家在定義img對象時(shí)，最后將alt和title對象都寫全，保證在各種瀏覽器中都能正常使用

其他的細(xì)節(jié)差別
當(dāng)你在寫css的時(shí)候，特別是用float: left（或right）排列一竄圖片時(shí)，會發(fā)現(xiàn)在firefox里面正常而IE里面有問題。無論你用margin:0,還是border: 0來約束，都無濟(jì)于事。

其實(shí)這里還有另外一個(gè)問題，就是IE對于空格的處理，firefox是忽略的而IE對于塊與塊之間的空格是處理的。也就是說一個(gè)div結(jié)束后要緊接著一個(gè)div寫，中間不要有回車或者空格。不然也許會有問題，比如3px的偏差，而且這個(gè)原因很難發(fā)現(xiàn)。

非常不走運(yùn)的是我又碰到了這樣的問題，多個(gè)img標(biāo)簽連著，然后定義的float: left，希望這些圖片可以連起來。但是結(jié)果在firefox里面正常而IE里面顯示的每個(gè)img都相隔了3px。我把標(biāo)簽之間的空格都刪除都沒有作用。

后來的解決方法是在img外面套li，并且對li定義margin: 0，這樣就解決了IE和firefox的顯示偏差。IE對于一些模型的解釋會產(chǎn)生很多錯(cuò)誤問題，只有多多嘗試才能發(fā)現(xiàn)原因。

2、嵌套DIV:父DIV的高度不能根據(jù)子DIV自動變化的解決方案
div id="parent">
div id="content"> /div>
/div>

當(dāng)Content內(nèi)容多時(shí)，即使parent設(shè)置了高度100%或auto,在不同瀏覽器下還是不能完好的自動伸展。解決方案

div id="parent">
div id="content">/div>
div style="font: 0px/0px sans-serif;clear: both;display: block"> /div>
/div>

在層的最下方產(chǎn)生一個(gè)高度為1的空格，可解除這個(gè)問題

3、CSS DIV 學(xué)習(xí)筆記
一、基本上每個(gè)區(qū)塊的div 都要有自己的id，杜絕不同功能的區(qū)塊用同一個(gè)id/class

二、每個(gè)稍大的區(qū)塊div 后面都跟一個(gè)!-- /id -->標(biāo)記開始、結(jié)束

三、隱藏文字的又一種方法 TEXT-INDENT: -9999px; LINE-HEIGHT: 0

四、巧妙地處理并列的兩列:
1)
右列為P, width=44.5%, float=left
左列為P.first, border-right: #a7a7a7 1px solid, width=45%
2)
右列#right, margin-left:50%
左列#left, float=left,width=50% border-right:#a7a7a7 1px solid

以上兩種方法關(guān)鍵點(diǎn)在于選擇其中一個(gè)為float=left

五、隨機(jī)的切換圖片：
#random {
BACKGROUND: url(/rotate.php);
}
這個(gè)方法很巧妙。

4、關(guān)于div的高度自適應(yīng)
　　今天小尿讓我?guī)退捻撟咏鉀Q一個(gè)問題，就是div的高度自適應(yīng)，也就是在一個(gè)父級div中嵌套一左一右兩個(gè)子div，右邊的子div內(nèi)容可無限擴(kuò)展，而可以使得父級div的高度能被無限拉長，用一般的布局方法，在IE中可以正確瀏覽，在Mozilla中父級div的高度就固定在10px左右，無法自適應(yīng)高度，height:auto也不行，怎么辦呢。網(wǎng)上參考到一篇資料，要實(shí)現(xiàn)自適應(yīng)高度，div層必須具有float屬性，于是我開始動手試驗(yàn)，float:left的話，div就跑到頁面最左邊去了，這好辦，我在它的外面再套一層div，把位置定好，那么里面的就算float:left也不會被移動位置了。

xhtml:
==========================================================

div id="container_father">
  div id="container">
    div id="panel"> testbr />
     testbr />
     testbr />
      !-- id="panel" -->
    /div>
    div id="sidebar">
     ul>
       li class="current">預(yù)安裝檢查/li>
       li>閱讀 PFC 授權(quán)協(xié)議/li>
       li>初始化數(shù)據(jù)庫/li>
       li>完成安裝/li>
      /ul>
      !-- id="sidebar" -->
    /div>
    !-- id="container" -->
  /div>
/div>

CSS
=================================================
#container_father {
margin-left: auto;
margin-right: auto;
padding: 0px;
width: 750px;
}

#container {
   width: 750px;
   border: 1px solid #cccccc;
   padding: 8px;
   margin: 0px;
   background-color: #F1F3F5;
   float: left;
}

FRom: http://ulean.zg163.net/

12下一頁閱讀全文

標(biāo)簽：喀什濱州邯鄲海東南充遼源東莞陽泉

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《IE和FIREFOX下CSS的區(qū)別與解決方法第1/2頁》，本文關(guān)鍵詞和,FIREFOX,下,CSS,的,區(qū)別,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。