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ì)象都寫(xiě)全，保證在各種瀏覽器中都能正常使用
其他的細(xì)節(jié)差別
當(dāng)你在寫(xiě)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寫(xiě)，中間不要有回車或者空格。不然也許會(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/
5、 深入標(biāo)準(zhǔn) ~ The IE Doubled Float-Margin Bug(IE雙倍浮動(dòng)邊界Bug)
什么發(fā)生故障？
一段無(wú)錯(cuò)的代碼把一個(gè)居左浮動(dòng)(float:left)的元素放置進(jìn)一個(gè)容器盒(box)，并在浮動(dòng)元素上使用了左邊界(margin-left)來(lái)令它和容器的左邊產(chǎn)生一段距離。看起來(lái)相當(dāng)?shù)暮?jiǎn)單，對(duì)嗎？但直至它被在IE/Win中瀏覽為止，在瀏覽器中居左浮動(dòng)元素的邊界長(zhǎng)度被神秘地翻了一倍！
情況應(yīng)該如何？
下面的圖釋展示了一個(gè)簡(jiǎn)單的div(茶色的盒子)包含著一個(gè)居左浮動(dòng)的div(綠色的盒子)。浮動(dòng)元素有一個(gè)100px的左邊界，使容器盒與它的左邊緣之間產(chǎn)生了一個(gè)100px的間隙。到現(xiàn)在為止，一直都還不錯(cuò)。
.floatbox {
float: left;
width: 150px;
height: 150px;
margin: 5px 0 5px 100px;
/*This last value applies the 100px left margin */
}
陳舊的IE“雙倍占據(jù)”
原樣的相同代碼被在IE/Win中瀏覽時(shí)以些微不同的方式顯示，下面的圖釋展示了IE/Win在布局上所做的。
這為什么會(huì)發(fā)生？別問(wèn)這種傻問(wèn)題！這就是IE，記得嗎？符合標(biāo)準(zhǔn)只是理想的狀況，不指望實(shí)現(xiàn)，這個(gè)簡(jiǎn)單的事實(shí)正驗(yàn)證了。
重點(diǎn)
這個(gè)Bug僅當(dāng)浮動(dòng)邊界和浮動(dòng)元素的方向相同時(shí)出現(xiàn)在浮動(dòng)元素和容器盒的內(nèi)邊緣之間，在這之后的任意有著相似邊界的浮動(dòng)元素不會(huì)呈現(xiàn)雙倍邊界。只有特定的浮動(dòng)行的第一個(gè)浮動(dòng)元素會(huì)遭遇這個(gè)Bug。像居左的情況一樣，雙倍邊界同樣神秘地顯示在居右的相同方式。
最后，修復(fù)辦法！
直到現(xiàn)在(04年1月)這個(gè)Bug一直被認(rèn)為是無(wú)法修復(fù)的，通常用來(lái)替代錯(cuò)誤的邊界的控制方法如：一個(gè)不可視浮動(dòng)元素的左邊距，連同一個(gè)內(nèi)嵌的盒子一起，可視的盒子裝在不可視浮動(dòng)元素里；或者使用技巧僅對(duì)IE/Win設(shè)定邊界的1/2值。這辦法生效了，但是是混亂的而且搞糟了干凈的源代碼。不過(guò)現(xiàn)在全部結(jié)束了。
Steve Clason發(fā)現(xiàn)了一個(gè)修復(fù)辦法，描述在他的Guest Demo里，修復(fù)了雙倍邊界和圍繞文字縮進(jìn)Bug。這是一個(gè)經(jīng)典的IE的Bug修復(fù)辦法，使用一個(gè)屬性來(lái)修復(fù)影響不相關(guān)屬性的Bug。
現(xiàn)在如何來(lái)做？
研究它，簡(jiǎn)單地將{display: inline;}設(shè)置給浮動(dòng)元素就是全部所需做的！是的，聽(tīng)起來(lái)太簡(jiǎn)單了，不是嗎？不過(guò)這是真的，僅僅一個(gè)display的"inline"聲明已經(jīng)能夠勝任了。
熟悉規(guī)則的人知道浮動(dòng)元素自動(dòng)設(shè)置為"block"元素，而不管他們之前是什么。就如Steve從W3C里指出：
9.5.1 Positioning the float: the 'float' property
"This property specifies whether a box should float to the left, right, or not at all. It may be set for elements that generate boxes that are not absolutely positioned. The values of this property have the following meanings:
left
The element generates a block box that is floated to the left. Content flows on the right side of the box, starting at the top (subject to the 'clear' property). The 'display' is ignored, unless it has the value 'none'.
right
Same as 'left', but content flows on the left side of the box, starting at the top.
none
The box is not floated. "
這說(shuō)明浮動(dòng)元素上的{display: inline;}會(huì)被忽略，事實(shí)上所有的瀏覽器沒(méi)有呈現(xiàn)任何改變，包括IE。但是，它不知何故讓IE停止將浮動(dòng)元素的邊界翻倍。因而，這個(gè)修復(fù)辦法可以被直接應(yīng)用，而沒(méi)有任何繁瑣的隱藏方法。如果將來(lái)的一款瀏覽器決定對(duì)這個(gè)修復(fù)辦法抱恙，只要把這個(gè)修復(fù)裝入IE獨(dú)用的Tan Hack里，細(xì)節(jié)如同IE Three Pixel Text-Jog Demo。
下面是兩個(gè)使用了前面相同代碼的生動(dòng)演示，第一個(gè)照常顯示了IE的Bug，下一個(gè)對(duì)浮動(dòng)元素使用了"inline"修復(fù)。
.floatbox {
float: left;
width: 150px;
height: 150px;
margin: 5px 0 5px 100px;
display: inline;
}