在Firefox中，父级div的宽度大于子元素的宽度

Question

在Firefox中，父级div的宽度大于子元素的宽度

11

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

我有一个高度以恒定像素值定义的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的大小比其中的图像更大。

有任何想法为什么会出现这种情况吗？

- Ozgur Akcali

1

这两个小提琴之间的差别与JavaScript无关。一个有“overflow：hidden”，另一个没有。 - James Montagne

是的，你说得对，但是Firefox和Chrome之间的差异仍然存在。我已经更新了问题以反映这个变化。 - Ozgur Akcali

1

这在我看来似乎是FF的一个bug。由于某种原因，overflow：hidden 导致父div使用未缩放图像的宽度而不是后缩放的宽度。http://jsfiddle.net/MXudn/7/ 你需要那个 overflow: hidden 吗？这里有一个最小版本，已经删除了不必要的部分以最小化重现问题 http://jsfiddle.net/MXudn/8/ - James Montagne

不确定是否有帮助，但现在它按照预期工作（除了底部）...当将wrapper的显式高度设置为500px时，一切都很好。 :) - sinisake

不要紧，把高度设为500像素意味着图片不再需要缩放，从而完全避免了这个问题，因为图片的高度也是500像素。 - James Montagne

正如詹姆斯所建议的那样，当我删除了overflow:hidden时，它按预期工作。在我的情况下，我将删除它，因为实际上我不需要它。但是如果您需要overflow:hidden，我不知道如何防止这个问题。詹姆斯，如果您将您的评论发布为答案，我可以接受它。 - Ozgur Akcali

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- James Montagne · Accepted Answer

这对我来说看起来像是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票据，处理此问题。