靳氏DIV布局相容「武林秘訣」

1、學習div的方法

第一，掌握css、html語法。css中除了一般語法之外，特別是float、clear、overflow、line-height等，對於html標籤重點是div、ul、li、dl、dd等幾個。

第二，其實div最好的教程就是你把qq.com 163.com sohu.com ifeng.com這幾個大門戶**的做法研究一下，如果你一下子看不懂這麼大的**，可以參考我講課中帶著學生一起開發的www.ccopen.net 及www.chinajwork.org。

2、讓div相容的方法：

靳氏相容(ie6、ie7、ff)口決：

有浮必清，方能相容；

統一預設，盡量為零；

有高則高，無高而高，

規規整整，方能大成！

(出自 www.zuoyefeng.com )

有浮必清，方能相容

在使用浮動標籤後(float:left)，後面div一定要清除浮動(clear:left;)。

這樣才能相容ie6、ie7、ff，否則將出來布局混亂。

示例：

1 2

3 統一預設，盡量為零

不同的瀏覽器預設值是不一樣的。比如：對於ul li標籤的margin屬性，各不相同。因此，我們在做**時，先要定義一些全域性的樣式表，一來約束整站，二來統計預設值。從而達到相容之目的，這叫「統一預設」，正是「集中思想，統一戰線」。

盡量為零是指，當我們使用div的時候，盡量明確它們的margin和padding值，不要預設，如果不需要有間距，定義為0。

有高則高，無高而高

這兩點最重點，可謂是經驗中的經驗。所謂有高則高，就是當你定義div的高度（height）的時候，一定要定義行高（line-height）。這個做法，對相容ie6、ie7特別重要。

比如：

這個二像索高的div，在ie6和ie7中是有差別的，加上

或之後，就相同了，這只是一例。

所以有高則高就是，定義了高度，就要定義overflow或者line-height，或者二者都定義，則相容之。

無高而高，如果你想讓文字或把div撐開，一定不要定義高度；反之，你定義了高度，ie一般可發撐開，但ff是撐不開的。

同時，當你不希望div被掌握開時，你會定義高和寬，此時，你最好再定義乙個overflow:hidden; 不加滾動條;overflow:auto;自動。簡言之，不對div定義高度，內容可以把div撐開，就是div跟著內容走，故言「無高而高」。

規規整整，方能大成！

最後，我說的是，程式設計、做div、寫**的習慣，那就是要「像詩歌一樣，講究推敲；像風景一樣，優美舒暢」。因為，你寫的亂七八糟，將會越多越亂，最後整個乙個豆腐渣工程。不但日後很難修改，你也不能重複利用。

ok，用我的口決，大家可以解決你div程式設計中90%以上的問題。