學習DIV float在ff和ie下的布局區別
你對DIV float在ff和ie下的布局區別是否了解，這里和大家分享一下，DIV的起始標簽和結束標簽之間的所有內容都是用來構成這個塊的，其中所包含元素的特性由DIV標簽的屬性來控制，或者是通過使用樣式表格式化這個塊來進行控制。
學習DIV float在ff和ie下的布局區別
基本HTML代碼
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml">
- <head><title>DIVFloatSampletitle>
- <styletypestyletype="text/css">DIV{margin:3px;}.d1{width:250px;min-height:20px;border:1pxsolid#00cc00;}
- .d2{width:130px;min-height:40px;border:1pxsolid#0000cc;}
- .d3{width:100px;min-height:40px;border:1pxsolid#cc0000;}
- style>head>
- <body><DIVclassDIVclass="d1">
- <DIVclassDIVclass="d2">
- DIV><DIVclassDIVclass="d3">
- DIV>DIV>body>
- html>
以上代碼顯示的結果如下，很正常，結果相同。
下面會在這個基礎上進行修改，修改的內容都在style中，其他代碼就不再重復寫了。
請注意，這里的Style中用到了min-height，這個和height是不同的，min-height指定了對象的一個最小高度，當對象的子內容高度超過這個最小高度是，這個對象會自動撐大。這是一個非常牛的style，可惜的是，在這個style和float這個同樣牛的style一起使用的時候，就會出現各種問題。#p#
◆內部一個DIV修改成為float:left
- .d1{width:250px;min-height:20px;border:1pxsolid#00cc00;}
- .d2{width:130px;min-height:40px;border:1pxsolid#0000cc;float:left;}
- .d3{width:100px;min-height:40px;border:1pxsolid#cc0000;}
顯示結果如下。
這個結果中，Firefox有點離譜了，兩個框疊在一起也就罷了，為什么那個紅框會變大捏？而且變的大小也很詭異，不知道是按照什么公式計算出來的。IE在這里的顯示應當是附和標準的。
◆內部兩個DIV都修改成為float:left
- .d1{width:250px;min-height:20px;border:1pxsolid#00cc00;}
- .d2{width:130px;min-height:40px;border:1pxsolid#0000cc;float:left;}
- .d3{width:100px;min-height:40px;border:1pxsolid#cc0000;float:left;}
顯示結果如下。
在這種情況下，Firefox的結果尚能解釋，可能是float把外層的DIV也作為內層float影響的范圍，這樣內層的就不會將外層的DIV撐大了。IE在這里出現了Margin失效的情況，可以解釋為內層第二個float造成了影響。#p#
◆干脆把外層的DIV也修改成為float:left
- .d1{width:250px;min-height:20px;border:1pxsolid#00cc00;float:left;}
- .d2{width:130px;min-height:40px;border:1pxsolid#0000cc;float:left;}
- .d3{width:100px;min-height:40px;border:1pxsolid#cc0000;float:left;}
顯示結果如下。
這種情況下，Firefox正常了，而IE延續了前面的不正常情況。
◆外層是float:left，內層最后一個不再float:left
- .d1{width:250px;min-height:20px;border:1pxsolid#00cc00;float:left;}
- .d2{width:130px;min-height:40px;border:1pxsolid#0000cc;float:left;}
- .d3{width:100px;min-height:40px;border:1pxsolid#cc0000;}
顯示結果如下。
這和前面第一種加float:left的情況相同。#p#
結論
再重申一次，本文討論的是一個比較高級的話題。如果在style中用height而不是min-height來設定高度，是不會出現以上這些問題的。不過，不用min-height就失去了DIV自動撐大這一個很有必要的特性。在min-height和float:left的情況下，沒有一種完美的寫法讓Firefox和IE結果相同。不過仍然可以發現繞開的方法。進一步試驗可以發現，margin遭到的影響在padding上比較好，所以最好是padding和margin都不用，或者只用padding。
兩者相同的代碼如下：
- DIV{padding:3px;}
- .d1{width:250px;min-height:20px;border:1pxsolid#00cc00;float:left;}
- .d2{width:130px;min-height:40px;border:1pxsolid#0000cc;float:left;}
- .d3{width:100px;min-height:40px;border:1pxsolid#cc0000;float:left;}
顯示結果如下。
當然所有這些情況也許是有合理解釋的，說不定增加某一個style的設置，這些問題都迎刃而解了，不過目前我還沒有找到這個設置。
【編輯推薦】
