Float bug in IE67

问题描述

今天做项目，要实现一个简单的页面UI，如下图显示：

左右分布的需求

很简单的需求，就是实现左右分布的样式。脑子中瞬间有了一个方案：

How to do

1. 今日数据 和 更新时间 文案以正常的span排布
2. 推广房源量 和 新增推广房源 文案以span向右浮动

So easy，happy coding...，话不多说，talk is cheap show me your code:

    <div class="statistics-banner">
        <span class="banner-head">今日数据</span>
        <span class="upd-time">更新时间：2017-2-14 14:30:00</span>
        <span class="qty">新增推广房源量：100</span>
        <span class="qty house-qty">推广房源量：80</span>
    </div>

.statistics-banner {
    padding: 0 20px;
    line-height: 60px;
    border: 1px solid #ccc;
    margin-bottom: 20px;
}
.banner-head {
    font-size: 18px;
}
.upd-time {
    margin-left: 30px;
    font-size: 12px;
    color: #999;
}
.qty {
    float: right;
    color: #666;
    font-size: 14px;
}
.house-qty {
    margin-right: 30px;
}

算了一下时间，十分钟不到就搞定，真高效。打开浏览器看看吧，
Chrome浏览器一切正常，
Firefox一切正常，
IE8-10一切正常，
IE7一切正常，
wait，
这是什么鬼？

IE7 float bug

为什么本该右浮动的文案出现了下一行中？
我第一个想到的问题就是IE7下是不是要触发一下hasLayout呢？
于是我在.statistics-banner中添加了一行代码：

.statistics-banner {
    padding: 0 20px;
    line-height: 60px;
    border: 1px solid #ccc;
    margin-bottom: 20px;
    overflow: hidden;    // 触发IE7下hasLayout
}

IE7下刷新页面（温馨提示：Ctrl + F5强刷一下哦），可是结果还是老样子，are u kidding me?

到底什么原因呢？是不是在IE7下面用float: right就会出现这个bug呢？做个试验吧
实验代码：

<div class="wrap">
    <span class="title">Title</span>
    <span class="desc">Second Text</span>
    <span class="hint fr">Right align text</span>
</div>

        .wrap {
            background: #ccc;
            line-height: 24px;
        }
        .wrap span{
            font-size: 16px;
        }
        .title {
            font-weight: 700;
        }
        .desc{
            color: red;
        }
        .hint{
            color:#62ab00;
        }
        .fr {
            float: right;
        }

看看结果吧！不抽风的浏览器是这样的：

Normal browser

抽风浏览器（你懂我说的谁）：

Abnomal browser

先说明一下这个问题吧，在一个容器中使用float:right元素，只要它不在第一的位置，它就会出现这个另起一行显示的bug，至于为什么说只要它不在第一的位置就会出现这个问题，下面的内容会让你更觉得怪异。

解决方案

既然出现了这个问题，我们总是要解决的，查阅了一些资料后，有了三个基本方案：

1.把容器中的右浮动元素放在第一的位置
即css代码不需要任何修改，只需要修改html代码：

    <div class="statistics-banner">
        <span class="qty">新增推广房源量：100</span>
        <span class="qty house-qty">推广房源量：80</span>
        <span class="banner-head">今日数据</span>
        <span class="upd-time">更新时间：2017-2-14 14:30:00</span>
    </div>

但是这种解决方案显然破坏了html的语义化，毕竟代码给人看的，也不利于后期维护

2.容器内的子元素全部浮动处理

    <div class="statistics-banner clearfix">
        <span class="fl banner-head">今日数据</span>
        <span class="fl upd-time">更新时间：2017-2-14 14:30:00</span>
        <span class="fr qty">新增推广房源量：100</span>
        <span class="fr qty house-qty">推广房源量：80</span>
    </div>

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}
.clearfix{
    *zoom:1;
}

.fl {
    float: left;
}
.fr {
    float: right;
}

3.不使用浮动，使用绝对定位
这种方案就是规避float在IE67中的bug

.statistics-banner {
    position: relative;
    // more...
}
.qty {
    position: absolute;
    right: 20px;
    // more...
}
.house-pty {
    right: 50px;
}

这种方案会比较麻烦，你需要明确位置信息。

问题根本原因

IE67下之所以会出现这样的问题，归根结底还是历史遗留问题，因为IE67的页面布局方案是先于标准布局的，当在容器中使用浮动元素时，它会影响到它的兄弟节点，它会把左兄弟元素当做block元素来处理，因此浮动会另起一行