產(chǎn)生原因:ie對(duì)百分比取值的計(jì)算是四舍五入法,這種方法有時(shí)會(huì)造成100%大于100%的情況
看例子:
<div class=container>
<div class=left></div>
<div class=right></div>
</div>
css:
.container{width:403px;...}
.left,.right{width:50%;float:left;...}
在這里,403平均的話每個(gè)是201.5,ie用的是四舍五入法,所以每個(gè)的寬度是202,202+202=404>403,所以錯(cuò)位了
由此我們可以推斷:凡是父元素的寬度為基數(shù)時(shí),就會(huì)發(fā)生錯(cuò)位現(xiàn)象
解決方法:在右側(cè)子元素中定義clear屬性為right,.right{clear:right;}
不僅如此,使用這種方法可以在ie6及更低版本瀏覽器強(qiáng)制更寬的浮動(dòng)元素并列顯示
例如:.container{width:400px;}
.left,.right{float:left;width:260px;height:100px;}
.right{clear:right;}
注:設(shè)置之后在ie6,7下能看到left和right層并列顯示了,但是在其他瀏覽器下不是并列顯示的
firefox對(duì)于百分比的計(jì)算方法是忽略小數(shù)部分,但會(huì)把多出的長(zhǎng)度分配給每個(gè)元素,如果是多出1px,會(huì)優(yōu)先分配給第一個(gè)元素
opera計(jì)算時(shí)也會(huì)忽略百分比的小數(shù)部分,如果里面的元素大于計(jì)算后的寬度不會(huì)導(dǎo)致元素?fù)Q行,netscape計(jì)算后忽略小數(shù)部分,但多出的部分透明顯示
更多信息請(qǐng)查看IT技術(shù)專欄
公眾號(hào)
事業(yè)單位
當(dāng)前位置：
公考類
招聘類
各類考試