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

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

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

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

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

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

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

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

當(dāng)Content內(nèi)容多時，即使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)生一個高度為1的空格，可解除這個問題

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

二、每個稍大的區(qū)塊div 后面都跟一個<!-- /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)在于選擇其中一個為float=left

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

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

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ù)庫</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/

最新評論