產生原因:IE對百分比取值的計算是四舍五入法,這種方法有時會造成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平均的話每個是201.5,ie用的是四舍五入法,所以每個的寬度是202,202+202=404>403,所以錯位了
由此我們可以推斷:凡是父元素的寬度為基數時,就會發生錯位現象
解決方法:在右側子元素中定義clear屬性為right,.right{clear:right;}
不僅如此,使用這種方法可以在ie6及更低版本瀏覽器強制更寬的浮動元素并列顯示
例如:.container{width:400px;}
.left,.right{float:left;width:260px;height:100px;}
.right{clear:right;}
注:設置之后在ie6,7下能看到left和right層并列顯示了,但是在其他瀏覽器下不是并列顯示的
Firefox對于百分比的計算方法是忽略小數部分,但會把多出的長度分配給每個元素,如果是多出1px,會優先分配給第一個元素
opera計算時也會忽略百分比的小數部分,如果里面的元素大于計算后的寬度不會導致元素換行,Netscape計算后忽略小數部分,但多出的部分透明顯示
更多信息請查看IT技術專欄
公眾號
事業單位
當前位置：
公考類
招聘類
各類考試
