您的位置:首页 > 其它

IE6下 float:right 后换行的问题

2013-07-02 09:54 281 查看
/article/5146403.html

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。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: