javascript - Firefox 中父 div 的宽度大于子 div 的宽度

Question

我在 Firefox 中有一个奇怪的问题。

我有一个高度定义为常量 px 值的 div，其中有一个 img 元素。我对 chrome 中的这个设置没有问题，但在 Firefox 中，父 div 的宽度结果比其中的 img 大。

这是html结构：

<div class="wrapper">
    <div class="imageHolder">
        <img src='dasource'>
    </div>
</div>

这是CSS：

.wrapper {
    width: 900px;
}

.imageHolder {
    height: 400px;
    width: auto;
    background-color: green;
    float: left;
    max-width: 50%;
    overflow: hidden;
}

.imageHolder img {
    height: 100%;
}

http://jsfiddle.net/MXudn/6

正如这个小提琴中所解释的，在 Firefox 中，父 div 比其中的图像大。

任何想法为什么会这样？

Answer 1

在我看来，这确实像 Firefox 中的一个错误。由于某种原因overflow: hidden导致父div级使用未缩放图像的宽度而不是后缩放。

http://jsfiddle.net/MXudn/8

<div class="imageHolder">
    <img src='http://placehold.it/650x650' />
<div>

.imageHolder {
    height: 400px;
    background-color: green;
    float: left;
    overflow: hidden;
}

.imageHolder img {
    height: 100%;
}

在这个精简的示例中，您可以清楚地看到问题所在。图像最初是650px宽的，根据高度重新缩放，它变得400px宽。然而，父级仍然650px很宽。

如果您不需要overflow: hidden解决问题的简单删除。

http://jsfiddle.net/MXudn/12/

编辑： 此问题的 Firefox bugzilla 票证。