css - firefox 不响应 float 与溢出 :hidden

Question

我有一张 float 图片，右侧有文字。我想在文本上设置最小宽度，因此当调整浏览器大小时，文本会挤压但仅限于一定宽度。之后它应该移动到图片下方。它适用于 chrome 但不适用于 firefox。我不想使用媒体查询。 Firefox 只有在我设置了 width 属性但我不想设置时才工作。感谢您的帮助。

代码

<div class="wrapper">
    <ul>
        <li>
            <div class="image"></div>
            <div class="info">text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</div>

        </li>

    </ul>
</div>

CSS

.wrapper {
    width:100%
}
.image {
    height:100px;
    width:50px;
    margin:10px;
    border:1px solid;
    float:left
}
.info {
    min-width:200px;
    overflow:hidden;
}

jsfiddle http://jsfiddle.net/b4ffoayh/7/

Answer 1

我希望我知道为什么，但添加如下代码似乎有效。

li {
    display:inline-block; /*or inline-table*/
}

更新的演示:http://jsfiddle.net/bt0c252z/