javascript - 在Firefox中，parent div的宽度大于 child 的宽度

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

我有一个以高度为单位的px像素值，并且其中包含一个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大于其中的图像。

任何想法为什么会这样？

最佳答案

在我看来，这确实像是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 ticket for this issue.