Float Squeeze Weird Gap Bug

1.    Float Squeeze Weird Gap Bug，简称为浮动挤压bug

产生bug的浏览器：ie6、ie7

描述：外层块级元素包含数目超过3个的浮动内联元素，且内联元素width大于外层块级元素。就在最后一个内联元素和倒数第二个内联元素之间有间距。

Demo：

HTML Code:

    <p>

        <span>A</span>

        <span>B</span>

        <span>C</span>

        <span>D</span>

    </p>

CSS Code：

p {

    width: 100px;

}

span {

    border: 1px solid #000;

    float: left;

    width: 120px;

}

·       预览：

解决方案：

1.    删除内联元素之间的空格。

<p

><span>A</span

><span>B</span

><span>C</span

><span>D</span

></p>

就不会有问题了。

2.    减少内联元素的个数（小于3）

3.    增加外层块级元素的width（大于浮动内联元素的width）

4.    内层元素换成块级标签（外层元素不能是p标签）

原因：ie6-7下对于这种情况，有个浮动挤压的问题。将标签内的文本节点有个挤压的layout。