firefox 不响应 overflow:hidden 的浮动

Question

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

代码

<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

我不知道，你为什么要采用这种方法，但问题似乎在于你的 'info' div 获得了第一个的整个宽度李标签。

恕我直言，一种更简单的方法是使用 flexboxes。

https://css-tricks.com/snippets/css/a-guide-to-flexbox/#flexbox-background

这可能需要额外的返工，但您可以获得更多。

Answer 2

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

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

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

firefox 不响应 overflow:hidden 的浮动

firefox not responding to float with overflow:hidden

css

firefox

css-float