IT博客汇
  • 首页
  • 精华
  • 技术
  • 设计
  • 资讯
  • 扯淡
  • 权利声明
  • 登录 注册

    [原]解决IE6下 float:left浮动换行的问题几种方法

    grumoon发表于 2014-08-05 10:52:21
    love 0

    IE6下有不少奇怪的Bug,今天就碰到一个,float:换行bug,情况是并列的几个块级元素如div和span,一些设置了左浮动一些设置右浮动,一行的宽度足够放下所有的块级元素,但此时ie6则显示右浮动的其中一块换行了,下面给出实例和解决方法:
    实例说明下,代码如下:


    < span class="left">左边
    < span class="center">中间
    < span style="float: right" class="right">右边
    < /div>.left和.center都没有 float 属性,然后在FireFox,google chrome及IE7、IE8等浏览器下都正常显示,可在Internet Explorer 6 下有bug:本来排一行的左边+中间+右边,可右边淘气的跳到了下一行。

    解决方案:

    1.不用修改css什么的,只要把float的模块放到非float的前面即可。
    上面的html结构重排下序:
    右边 左边 中间

    优点:不用谢多余的代码。
    缺点:破坏语意
    2.绝对定位。
    优点:不破坏语义。
    缺点:代码量加大。
    3.给他们都添加浮动。
    优点:同上。
    缺点:会引起其他bug等。
    4.添加hack:_margin-top:-10px;
    优点:同上。
    缺点:使用了hack。



沪ICP备19023445号-2号
友情链接