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

創(chuàng)新互聯(lián)公司是一家專注于網(wǎng)站設(shè)計(jì)、網(wǎng)站制作與策劃設(shè)計(jì),梅江網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)公司做網(wǎng)站,專注于網(wǎng)站建設(shè)十載,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:梅江等地區(qū)。梅江做網(wǎng)站價(jià)格咨詢:028-86922220
學(xué)習(xí)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>
以上代碼顯示的結(jié)果如下,很正常,結(jié)果相同。
下面會(huì)在這個(gè)基礎(chǔ)上進(jìn)行修改,修改的內(nèi)容都在style中,其他代碼就不再重復(fù)寫了。
請(qǐng)注意,這里的Style中用到了min-height,這個(gè)和height是不同的,min-height指定了對(duì)象的一個(gè)最小高度,當(dāng)對(duì)象的子內(nèi)容高度超過這個(gè)最小高度是,這個(gè)對(duì)象會(huì)自動(dòng)撐大。這是一個(gè)非常牛的style,可惜的是,在這個(gè)style和float這個(gè)同樣牛的style一起使用的時(shí)候,就會(huì)出現(xiàn)各種問題。#p#
◆內(nèi)部一個(gè)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;}
顯示結(jié)果如下。
這個(gè)結(jié)果中,F(xiàn)irefox有點(diǎn)離譜了,兩個(gè)框疊在一起也就罷了,為什么那個(gè)紅框會(huì)變大捏?而且變的大小也很詭異,不知道是按照什么公式計(jì)算出來的。IE在這里的顯示應(yīng)當(dāng)是附和標(biāo)準(zhǔn)的。
◆內(nèi)部兩個(gè)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;}
顯示結(jié)果如下。
在這種情況下,F(xiàn)irefox的結(jié)果尚能解釋,可能是float把外層的DIV也作為內(nèi)層float影響的范圍,這樣內(nèi)層的就不會(huì)將外層的DIV撐大了。IE在這里出現(xiàn)了Margin失效的情況,可以解釋為內(nèi)層第二個(gè)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;}
顯示結(jié)果如下。
這種情況下,F(xiàn)irefox正常了,而IE延續(xù)了前面的不正常情況。
◆外層是float:left,內(nèi)層最后一個(gè)不再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;}
顯示結(jié)果如下。
這和前面第一種加float:left的情況相同。#p#
結(jié)論
再重申一次,本文討論的是一個(gè)比較高級(jí)的話題。如果在style中用height而不是min-height來設(shè)定高度,是不會(huì)出現(xiàn)以上這些問題的。不過,不用min-height就失去了DIV自動(dòng)撐大這一個(gè)很有必要的特性。在min-height和float:left的情況下,沒有一種完美的寫法讓Firefox和IE結(jié)果相同。不過仍然可以發(fā)現(xiàn)繞開的方法。進(jìn)一步試驗(yà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;}
顯示結(jié)果如下。
當(dāng)然所有這些情況也許是有合理解釋的,說不定增加某一個(gè)style的設(shè)置,這些問題都迎刃而解了,不過目前我還沒有找到這個(gè)設(shè)置。
【編輯推薦】
- DIV+CSS中常見十大錯(cuò)誤總結(jié)
- DIV定位單元中三大元素的控制
- 深入學(xué)習(xí)DIV+CSS之絕對(duì)定位和相對(duì)定位用法
- Div+CSS布局入門之寫入整體層結(jié)構(gòu)與CSS
- DIV+CSS開發(fā)過程中影響SEO的制作細(xì)節(jié)
本文名稱:學(xué)習(xí)DIVfloat在ff和ie下的布局區(qū)別
轉(zhuǎn)載來于:http://fisionsoft.com.cn/article/djpcpis.html


咨詢
建站咨詢
