新聞中心
你對DIV float在ff和ie下的布局區(qū)別是否了解,這里和大家分享一下,DIV的起始標簽和結束標簽之間的所有內容都是用來構成這個塊的,其中所包含元素的特性由DIV標簽的屬性來控制,或者是通過使用樣式表格式化這個塊來進行控制。

創(chuàng)新互聯(lián)公司是一家專注于網站設計、網站制作與策劃設計,梅江網站建設哪家好?創(chuàng)新互聯(lián)公司做網站,專注于網站建設十載,網設計領域的專業(yè)建站公司;建站業(yè)務涵蓋:梅江等地區(qū)。梅江做網站價格咨詢:028-86922220
學習DIV float在ff和ie下的布局區(qū)別
基本HTML代碼
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
DIVFloatSample title> 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>
- DIV>
- DIV> DIV> body>
- html>
以上代碼顯示的結果如下,很正常,結果相同。
下面會在這個基礎上進行修改,修改的內容都在style中,其他代碼就不再重復寫了。
請注意,這里的Style中用到了min-height,這個和height是不同的,min-height指定了對象的一個最小高度,當對象的子內容高度超過這個最小高度是,這個對象會自動撐大。這是一個非常牛的style,可惜的是,在這個style和float這個同樣牛的style一起使用的時候,就會出現(xiàn)各種問題。#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;}
顯示結果如下。
這個結果中,F(xiàn)irefox有點離譜了,兩個框疊在一起也就罷了,為什么那個紅框會變大捏?而且變的大小也很詭異,不知道是按照什么公式計算出來的。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;}
顯示結果如下。
在這種情況下,F(xiàn)irefox的結果尚能解釋,可能是float把外層的DIV也作為內層float影響的范圍,這樣內層的就不會將外層的DIV撐大了。IE在這里出現(xiàn)了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;}
顯示結果如下。
這種情況下,F(xiàn)irefox正常了,而IE延續(xù)了前面的不正常情況。
◆外層是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來設定高度,是不會出現(xiàn)以上這些問題的。不過,不用min-height就失去了DIV自動撐大這一個很有必要的特性。在min-height和float:left的情況下,沒有一種完美的寫法讓Firefox和IE結果相同。不過仍然可以發(fā)現(xiàn)繞開的方法。進一步試驗可以發(fā)現(xiàn),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的設置,這些問題都迎刃而解了,不過目前我還沒有找到這個設置。
【編輯推薦】
- DIV+CSS中常見十大錯誤總結
- DIV定位單元中三大元素的控制
- 深入學習DIV+CSS之絕對定位和相對定位用法
- Div+CSS布局入門之寫入整體層結構與CSS
- DIV+CSS開發(fā)過程中影響SEO的制作細節(jié)
分享文章:學習DIVfloat在ff和ie下的布局區(qū)別
文章源于:http://www.5511xx.com/article/djpcpis.html


咨詢
建站咨詢
