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

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

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

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

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

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

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

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

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

<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è)問(wèn)題

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

二、每個(gè)稍大的區(qū)塊div 后面都跟一個(gè)<!-- /id -->標(biāo)記開(kāi)始、結(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ī)退捻?yè)子解決一個(gè)問(wèn)題，就是div的高度自適應(yīng)，也就是在一個(gè)父級(jí)div中嵌套一左一右兩個(gè)子div，右邊的子div內(nèi)容可無(wú)限擴(kuò)展，而可以使得父級(jí)div的高度能被無(wú)限拉長(zhǎng)，用一般的布局方法，在IE中可以正確瀏覽，在Mozilla中父級(jí)div的高度就固定在10px左右，無(wú)法自適應(yīng)高度，height:auto也不行，怎么辦呢。網(wǎng)上參考到一篇資料，要實(shí)現(xiàn)自適應(yīng)高度，div層必須具有float屬性，于是我開(kāi)始動(dòng)手試驗(yàn)，float:left的話，div就跑到頁(yè)面最左邊去了，這好辦，我在它的外面再套一層div，把位置定好，那么里面的就算float:left也不會(huì)被移動(dòng)位置了。

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

<div id="container_father">
  <div id="container">
    <div id="panel"> test<br />
     test<br />
     test<br />
      <!-- id="panel" -->
    </div>
    <div id="sidebar">
     <ul>
       <li class="current">預(yù)安裝檢查</li>
       <li>閱讀 PFC 授權(quán)協(xié)議</li>
       <li>初始化數(shù)據(jù)庫(kù)</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/

最新評(píng)論