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 ticket for this issue.

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

1 个答案: