CSS 兼容要點：
DOCTYPE 影響 CSS 處理
FF: div 設置 margin-left, margin-right 為 auto 時已經居中, IE 不行
FF: body 設置 text-align 時, div 需要設置 margin: auto(主要是 margin-left,margin-right) 方可居中
FF: 設置 padding 后, div 會增加 height 和 width, 但 IE 不會, 故需要用 !important 多設一個 height 和 width
FF: 支持 !important, IE 則忽略, 可用 !important 為 FF 特別設置樣式
div 的垂直居中問題: vertical-align:middle; 將行距增加到和整個DIV一樣高 line-height:200px; 然后插入文字，就垂直居中了。缺點是要控制內容不要換行
cursor: pointer 可以同時在 IE FF 中顯示， hand 僅 IE 可以
FF: 鏈接加邊框和背景色，需設置 display: block, 同時設置 float: left 保證不換行
參照 menubar, 給 a 和 menubar 設置高度是為了避免底邊顯示錯位, 若不設 height, 可以在 menubar 中插入一個空格
這里只考慮 IE5.5+ 的情況，有些教程還在討論 IE5 的兼容性，我覺得就沒有什么必要了
1、使整個塊在頁面居中對齊
IE瀏覽器：先設定 body 的樣式為 text-align: center; 然后指定區塊的樣式 margin: auto ; text-align: left ;
FF瀏覽器：指定區塊的樣式 margin: auto ; 即可
2、使用 XHTML 1.0 Transitional 標準時， width 與 height 不兼容
FF瀏覽器：用 !important width: width + padding + border;
如：
div.test {
border:25px solid;
background: #ffc;
padding:25px;
width:400px;
width:300px !important;
}
IE是不能識別 width:300px !important; 的，但在 Firefox 中能識別，從而達到兩者兼容的目的。
如果這個元素設定了float屬性，還可以使用一個更簡單的辦法使之兼容
加上 display:inline;
即是：
div.test {
border:25px solid;
background: #ffc;
padding:25px;
width:400px;
float:left;
display:inline;
}
注意：在沒有指定 float 的時候使用 display:inline; 在FF中是無效的。
3、hand 指針圖標屬性
FF是不能識別 cursor: hand; 的，可以用 cursor: pointer ，這樣兩個瀏覽器都能識別。
4、腳本引入的書寫方式
這里討論的主要是 XHTML 1.0 標準，據說在 1.1 中，腳本引入必須寫成
<script type="text/javascript">
為了兼容，可以寫成
<script language="text/javascript" type="text/javascript">
因為按XML的標準，多一個無關的屬性是不影響解析的，但能達到兩者兼容的目的。
5、嵌套DIV：父DIV的高度不能根據子DIV自動變化的解決方案
IE 瀏覽器對于多重DIV嵌套自適應高度是非常理想的，不管使用百分比還是固定值父DIV都會根據子DIV變化而變化，但在FF瀏覽等，子DIV如果比父 DIV高則會越過父DIV，從而影響總體排版，必須指定父ID為float,然后通過在子DIV后加一個clear的DIV來解決，如：
<div id="parent" style="float:left">
<div id="content"></div>
</div>
<div style="clear: both;"></div>
對高度的解析
IE：將根據內容的高度變化，包括未定義高度的圖片內容，即使定義了高度，當內容超過高度時，將使用實際高度
Firefox：沒有定義高度時，如果內容中包括了圖片內容，MF的高度解析是根據印刷標準，這樣就會造成和實際內容高度不符合的情況；當定義了高度，但是內容超過高度時，內容會超出定義的高度，但是區域使用的樣式不會變化，造成樣式錯位。
結論：大家在可以確定內容高度的情況下最好定義高度，如果真的沒有辦法定義高度，最好不用使用邊框樣式，否則樣式肯定會出現混亂！
img對象alt和title的解析
alt：當照片不存在或者load錯誤時的提示；
title：照片的tip說明。
在IE中如果沒有定義title，alt也可以作為img的tip使用，但是在MF中，兩者完全按照標準中的定義使用
結論：大家在定義img對象時，最后將alt和title對象都寫全，保證在各種瀏覽器中都能正常使用
其他的細節差別
當你在寫css的時候，特別是用float: left（或right）排列一竄圖片時，會發現在firefox里面正常而IE里面有問題。無論你用margin:0,還是border: 0來約束，都無濟于事。
其實這里還有另外一個問題，就是IE對于空格的處理，firefox是忽略的而IE對于塊與塊之間的空格是處理的。也就是說一個div結束后要緊接著一個div寫，中間不要有回車或者空格。不然也許會有問題，比如3px的偏差，而且這個原因很難發現。
非常不走運的是我又碰到了這樣的問題，多個img標簽連著，然后定義的float: left，希望這些圖片可以連起來。但是結果在firefox里面正常而IE里面顯示的每個img都相隔了3px。我把標簽之間的空格都刪除都沒有作用。
后來的解決方法是在img外面套li，并且對li定義margin: 0，這樣就解決了IE和firefox的顯示偏差。IE對于一些模型的解釋會產生很多錯誤問題，只有多多嘗試才能發現原因。
2、嵌套DIV:父DIV的高度不能根據子DIV自動變化的解決方案
<div id="parent">
<div id="content"> </div>
</div>
當Content內容多時，即使parent設置了高度100%或auto,在不同瀏覽器下還是不能完好的自動伸展。 解決方案
<div id="parent">
<div id="content"></div>
<div style="font: 0px/0px sans-serif;clear: both;display: block"> </div>
</div>
在層的最下方產生一個高度為1的空格，可解除這個問題
3、CSS DIV 學習筆記
一、基本上每個區塊的div 都要有自己的id，杜絕不同功能的區塊用同一個id/class
二、每個稍大的區塊div 后面都跟一個<!-- /id -->標記開始、結束
三、隱藏文字的又一種方法 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
以上兩種方法關鍵點在于選擇其中一個為float=left
五、隨機的切換圖片：
#random {
BACKGROUND: url(/rotate.php);
}
這個方法很巧妙。
4、關于div的高度自適應
今天小尿讓我幫他的頁子解決一個問題，就是div的高度自適應，也就是在一個父級div中嵌套一左一右兩個子div，右邊的子div內容可無限擴展，而可以使得父級div的高度能被無限拉長，用一般的布局方法，在IE中可以正確瀏覽，在Mozilla中父級 div的高度就固定在10px左右，無法自適應高度，height:auto也不行，怎么辦呢。網上參考到一篇資料，要實現自適應高度，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">預安裝檢查</li>
<li>閱讀 PFC 授權協議</li>
<li>初始化數據庫</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、 深入標準 ~ The IE Doubled Float-Margin Bug(IE雙倍浮動邊界Bug)
什么發生故障？
一段無錯的代碼把一個居左浮動(float:left)的元素放置進一個容器盒(box)，并在浮動元素上使用了左邊界(margin-left) 來令它和容器的左邊產生一段距離。看起來相當的簡單，對嗎？但直至它被在IE/Win中瀏覽為止，在瀏覽器中居左浮動元素的邊界長度被神秘地翻了一倍！
情況應該如何？
下面的圖釋展示了一個簡單的div(茶色的盒子)包含著一個居左浮動的div(綠色的盒子)。浮動元素有一個100px的左邊界，使容器盒與它的左邊緣之間產生了一個100px的間隙。到現在為止，一直都還不錯。
.floatbox {
float: left;
width: 150px;
height: 150px;
margin: 5px 0 5px 100px;
}
陳舊的IE“雙倍占據”
原樣的相同代碼被在IE/Win中瀏覽時以些微不同的方式顯示，下面的圖釋展示了IE/Win在布局上所做的。
這為什么會發生？別問這種傻問題！這就是IE，記得嗎？符合標準只是理想的狀況，不指望實現，這個簡單的事實正驗證了。
重點
這個Bug僅當浮動邊界和浮動元素的方向相同時出現在浮動元素和容器盒的內邊緣之間，在這之后的任意有著相似邊界的浮動元素不會呈現雙倍邊界。只有特定的浮動行的第一個浮動元素會遭遇這個Bug。像居左的情況一樣，雙倍邊界同樣神秘地顯示在居右的相同方式。
最后，修復辦法！
直到現在(04年1月)這個Bug一直被認為是無法修復的，通常用來替代錯誤的邊界的控制方法如：一個不可視浮動元素的左邊距，連同一個內嵌的盒子一起，可視的盒子裝在不可視浮動元素里；或者使用技巧僅對IE/Win設定邊界的1/2值。這辦法生效了，但是是混亂的而且搞糟了干凈的源代碼。不過現在全部結束了。
Steve Clason發現了一個修復辦法，描述在他的Guest Demo里，修復了雙倍邊界和圍繞文字縮進Bug。這是一個經典的IE的Bug修復辦法，使用一個屬性來修復影響不相關屬性的Bug。
現在如何來做？
研究它，簡單地將{display: inline;}設置給浮動元素就是全部所需做的！是的，聽起來太簡單了，不是嗎？不過這是真的，僅僅一個display的"inline"聲明已經能夠勝任了。
熟悉規則的人知道浮動元素自動設置為"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. "
這說明浮動元素上的{display: inline;}會被忽略，事實上所有的瀏覽器沒有呈現任何改變，包括IE。但是，它不知何故讓IE停止將浮動元素的邊界翻倍。因而，這個修復辦法可以被直接應用，而沒有任何繁瑣的隱藏方法。如果將來的一款瀏覽器決定對這個修復辦法抱恙，只要把這個修復裝入IE獨用的Tan Hack里，細節如同IE Three Pixel Text-Jog Demo。
下面是兩個使用了前面相同代碼的生動演示，第一個照常顯示了IE的Bug，下一個對浮動元素使用了"inline"修復。
.floatbox {
float: left;
width: 150px;
height: 150px;
margin: 5px 0 5px 100px;
display: inline;
}
firefox和IE對某些css樣式的認定有不少區別，包括：
ul和ol的默認padding值是不一樣的，在Firefox中，padding-left默認值為40px左右，而IE中為0，一般設置ul{margin:0;padding:0;}就能解決大部分問題
對字體大小small的定義不同，Firefox中為13px，而IE中為16px，差別挺大，也只能設置為14px了事；(暫時沒有發現)
并列排列的多個元素（圖片或者鏈接）的代碼中的空格和回車會造成元素之間的間隙，而在firefox中和在IE中顯示是不一樣的，IE顯示空格（約8px）、firefox顯示空格（約4px）
對不規范代碼的兼容情況不同，IE中漏掉的關閉符號對顯示不造成影響，而firefox中就會形成錯亂的布局，而在ie中用到的padding和margin的負值都會被firefox解析為0，易造成布局的混亂；（我覺得好像負值在firefox中也是有顯示的）
firefox對于長高尺寸的嚴格解析會造成與設置不匹配（超出）的圖片或表格將原設置div撐大；
！important屬性可以在除IE瀏覽器的其他瀏覽器中起作用，因此有人利用這種差別來令一個CSS兼容多種瀏覽器；
未定義id的div，在IE中會與div屬性中的其他設置有關，而在firefox中的位置會于div在文件中位置有關，緊隨前一個div出現……（有待嘗試）
設置為float的div在ie下設置的margin會加倍的，特別是margin-left，這是ie6的一個bug。解決的方法是在這個div里面加上display:inline;
如果是動態地添加內容，高度最好不要定義。瀏覽器可以自動伸縮，然而如果是靜態的內容，高度最好定好。（似乎有時候不會自動往下撐開，不知道具體怎么回事）
FF: div 設置 margin-left, margin-right 為 auto 時已經居中, IE 不行。IE里設置text-align:center，就居中了，但在FF中不行。所以一般兩個都要設置。
FF: 設置 padding 后, div 會增加 height 和 width, 但 IE 不會, 故需要用 !important 多設一個 height 和 width（也沒感覺，覺得設了padding，大家的高寬都變了）
在FF中可以實現的div 垂直居中問題: vertical-align:middle; 將行距增加到和整個DIV一樣高 line-height:200px; 然后插入文字，就垂直居中了。缺點是要控制內容不要換行。這種方法在IE中實現不了。（已試過！有用）
FF: 鏈接加邊框和背景色，需設置 display: block, 同時設置 float: left 保證不換行。
在浮動（float）的div后加clear屬性，這可以解決背景的自適應高度問題。怎么加才能讓不同瀏覽器都好使？IE中有默認行高，這是要解決的問題。
FF中不支持文字的自動轉行；什么word-wrap:break-word;word-break:break-all都是IE搞的鬼，根本就不符合css標準。（現在看到的解決辦法都是通過編程實現）
ul和ol的默認padding值是不一樣的，在Firefox中，padding-left默認值為40px左右，而IE中為0，一般設置ul{margin:0;padding:0;}就能解決大部分問題
對字體大小small的定義不同，Firefox中為13px，而IE中為16px，差別挺大，也只能設置為14px了事；(暫時沒有發現)
并列排列的多個元素（圖片或者鏈接）的代碼中的空格和回車會造成元素之間的間隙，而在firefox中和在IE中顯示是不一樣的，IE顯示空格（約8px）、firefox顯示空格（約4px）
對不規范代碼的兼容情況不同，IE中漏掉的關閉符號對顯示不造成影響，而firefox中就會形成錯亂的布局，而在ie中用到的padding和margin的負值都會被firefox解析為0，易造成布局的混亂；（我覺得好像負值在firefox中也是有顯示的）
firefox對于長高尺寸的嚴格解析會造成與設置不匹配（超出）的圖片或表格將原設置div撐大；
！important屬性可以在除IE瀏覽器的其他瀏覽器中起作用，因此有人利用這種差別來令一個CSS兼容多種瀏覽器；
未定義id的div，在IE中會與div屬性中的其他設置有關，而在firefox中的位置會于div在文件中位置有關，緊隨前一個div出現……（有待嘗試）
設置為float的div在ie下設置的margin會加倍的，特別是margin-left，這是ie6的一個bug。解決的方法是在這個div里面加上display:inline;
如果是動態地添加內容，高度最好不要定義。瀏覽器可以自動伸縮，然而如果是靜態的內容，高度最好定好。（似乎有時候不會自動往下撐開，不知道具體怎么回事）
FF: div 設置 margin-left, margin-right 為 auto 時已經居中, IE 不行。IE里設置text-align:center，就居中了，但在FF中不行。所以一般兩個都要設置。
FF: 設置 padding 后, div 會增加 height 和 width, 但 IE 不會, 故需要用 !important 多設一個 height 和 width（也沒感覺，覺得設了padding，大家的高寬都變了）
在FF中可以實現的div 垂直居中問題: vertical-align:middle; 將行距增加到和整個DIV一樣高 line-height:200px; 然后插入文字，就垂直居中了。缺點是要控制內容不要換行。這種方法在IE中實現不了。（已試過！有用）
FF: 鏈接加邊框和背景色，需設置 display: block, 同時設置 float: left 保證不換行。
在浮動（float）的div后加clear屬性，這可以解決背景的自適應高度問題。怎么加才能讓不同瀏覽器都好使？IE中有默認行高，這是要解決的問題。
FF中不支持文字的自動轉行；什么word-wrap:break-word;word-break:break-all都是IE搞的鬼，根本就不符合css標準。（現在看到的解決辦法都是通過編程實現）
css解決不同瀏覽器的兼容問題的方法:
（不是我們需要的方法，我們要達到的要求是盡量不寫!important也能解決）
解決這種問題可以通過規范css代碼，使其符合兩種規范的標準樣式，也可以在差別處利用！important對firefox設置屬性，或者針對多種瀏覽器分別各自配置合適的CSS文件，再通過判斷瀏覽器選擇不同CSS實現兼容性。
代碼如下：
<!--[endif]-->
<!--[endif]-->
#example { color: #333; }
* html #example { color: #666; }
*+html #example { color: #999; }
這樣在IE6中顯示字體顏色是#666；在IE7中顯示的字體顏色是#999；在FF中顯示的顏色是#333
3.FF解決背景的自適應高度問題
①對于背景不能自動延伸的原因上面說的很清楚，解決方法是多嵌套一個層,這個層設置浮動，并承擔背景，就ok了。
下面就簡單示意一下
本行代碼就是讓背景顏色自動延續
可以這么理解：float使得層自動獲得寬和高
但是有了第三種方法，這種方法好像并不值得推薦。
②另一種方法就是給第一個div賦予屬性值：display:table；但這種方法會造成另外一些布局上的錯誤。可以考慮使用，但不建議使用。
③我想這是最重要的一種方法，但是中間問題很多。方法就是clear:both。
.clear{clear:both}可以使高度向下延續，但是會自動產生行高；
.clear{clear:both;height:0}在FF中清除了行高，但是IE里不認；
.clear{clear:both;height:1%}在FF和IE中仍然不認；
像之前寫的.clear{clear:both;height:1%;font-size:0px;overflow:hidden}在IE中好使，但在FF中卻不能讓背景顏色延續，除非加上邊框。！挺有意思，還是不太懂
.clear{clear:both;line-height:1px}好使！我理解是清的這個容器默認是行元素，所以高對它不起作用，所以你無論把height設置為幾都沒有效果，而line-height本身就是作用于行元素的，所以好使！
上面理解的不對!重新理解是：IE里面有默認的行高，必須把行高給清掉，可以用font-size:0px或line-height:0px；但是這里又有一個問題，就是height的值不要用百分數，沒有用！
本行代碼就是讓背景顏色自動延續
代碼如下：
<!--[endif]-->
<!--[endif]-->
#example { color: #333; }
* html #example { color: #666; }
*+html #example { color: #999; }
這樣在IE6中顯示字體顏色是#666；在IE7中顯示的字體顏色是#999；在FF中顯示的顏色是#333