父div的宽度大于Firefox中孩子的宽度

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 票证。