IE6下有不少奇怪的Bug,今天就碰到一個,float right換行bug,情況是並列的幾個塊級元素如div和span,一些設置了左浮動一些設置右浮動,一行的寬度足夠放下所有的塊級元素,但此時ie6則顯示右浮動的其中一塊換行了,下面給出實例和解決方法:
實例說明下:html結構如下
<div>
<span class="left">左邊</span>
<span class="center">中間</span>
<span style="float: right" class="right">右邊</span>
</div>.left和.center都沒有 float 屬性,然后在FireFox,google chrome及IE7、IE8等瀏覽器下都正常顯示,可在Internet Explorer 6 下有bug:本來排一行的左邊+中間+右邊,可右邊淘氣的跳到了下一行。
解決方案:
1.不用修改css什么的,只要把float的模塊放到非float的前面即可。
上面的html結構重排下序:
<div><span style="float: right" class="right">右邊</span> <span class="left">左邊</span> <span class="center">中間</span> </div>
優點:不用謝多余的代碼。
缺點:破壞語意
2.絕對定位。
優點:不破壞語義。
缺點:代碼量加大。
3.給他們都添加浮動。
優點:同上。
缺點:會引起其他bug等。
4.添加hack。_margin-top:XXXXpx;
優點:同上。
缺點:使用了hack。