哈哈小老虎's Blog

项目中，一不留神就碰到了这个bug，虽未找到根本原因，但还是先和大家分享一下。。。

一. 重现bug

重现条件：当一个容器中的所有子元素被浮动，未显示的设置子元素宽度，且将元素设置为溢出隐藏，我们来看看具体的code：

// html：
<ul>
    <li>我是第一项</li>
    <li>我是第二项二项</li>
    <li>我是第三项三项三项</li>
    <li>我是第四项四项四项四项</li>
</ul>

// css：
* {
    margin: 0;
    padding: 0;
}
ul {
    width: 400px;
    overflow: hidden;
    margin: 20px auto;
    padding: 10px;
    font-size: 14px;
    border: 1px solid red;
}
ul li {
    display: inline;
    float: left;
    overflow: hidden; // 未设置宽度时，这哥们会导致bug
    white-space: nowrap;
    border: 1px solid green;
}

IE7和IE8的显示结果如下(非IE7的显示结果与IE8相同)：

二. 原因

这次有点杯具，只找到一点有参考价值的说明：

// 摘自"Do floated items need a width?"章节
   You should always set a width on floated items. If no width is set, the results can be unpredictable. Theoretically, a floated element with an undefined width should shrink to the widest element within it. This could be a word, a sentence or even a single character - and results can vary from browser to browser.

// 这里说明了两点(这里的信息也无法解释IE7中的表现)：
// 1. 当浮动元素未设置宽度时，结果可能是不可预知的；
// 2. 当浮动元素未设置宽度时，从理论上讲，元素的宽度等于其子元素宽度的最大值。

三. 解决办法

目前找到的解决方法有：

1. 去掉浮动元素上的overflow：hidden；

2. 显示设置浮动元素的宽度(但有时候，为了让元素自适应宽度，我们会故意不设置宽度)；

3. 如果被浮动的元素有子元素时，可将overflow: hidden设置到子元素上，如li下有个子元素a，那么可将a设置为block，然后再设置overflow: hidden。

四. 参考资源

1. Float basics

2. CSS Float Theory: Things You Should Know