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