Firefox 不水平扩展包含具有自动宽度的图像的 DIV 容器答案

【问题标题】：Firefox not expanding DIV container horizontally containing image with auto-widthFirefox 不水平扩展包含具有自动宽度的图像的 DIV 容器
【发布时间】：2013-04-27 01:00:43
【问题描述】：

我有一个带有两个容器的标记。第一个设置为“position:absolute”，所有 4 个“坐标”在整个网站上展开（left=right=bottom=top=30px）。

在该容器内是另一个容器，其高度设置为“100%”和“display:inline-block”（“inline-block”，因为第二个容器应仅水平扩展至所需宽度）。

第二个容器内部是一个高度设置为“100%”且宽度设置为“自动”的图像，因此图像始终与两个容器一样高，并且仍然具有正确的比例。

我需要这个第二个容器，因为我想在这个容器内放置一些绝对定位的元素，以便始终出现在图像的右侧。

问题如下：在 Firefox 中，第二个容器不会随着图像的自动宽度水平增长/扩展。它保持在图像的原始宽度。在 Safari/Chrome 中没有问题，只有 Firefox。

在这里您可以找到一个示例小提琴：http://jsfiddle.net/EGRCQ/ 第一个容器是蓝色的。在此您将找到第二个容器（红色），并在此容器内找到示例图像。如果您将输出窗口的高度降低到 180 像素以下，您将看到问题（红色容器变得可见），或者您只需使用 Firebug 检查其宽度。

HTML

<body>
    <div id="container1">
        <div id="container2">
            <img src="http://cdn4.spiegel.de/images/image-491267-thumb-wjvo.jpg"
                 width="180" height="180" />
        </div>
    </div>
</body>

CSS

html, body {
    width: 100%;
    height: 100%;
}
body {
    margin: 0;
    padding: 0;    
}
#container1 {
    background: aqua;
    position: absolute;
    top: 30px;
    left: 30px;
    bottom: 30px;
    right: 30px;
}
#container2 {
    background: red;
    height: 100%;
    display: inline-block;
}

#container2 img {
    height: 100%;
    width: auto;
}

谢谢，

丹尼尔

【问题讨论】：

您可以在bugzilla.mozilla.org/enter_bug.cgi提交错误报告

标签： html css firefox fluid-images

【解决方案1】：

如果容器的宽度小于图像的宽度，修复很简单

.element:after {
    color: transparent;
    content: "a";
}

【讨论】：

【解决方案2】：

收缩包装流体图像

这个问题的一个版本也出现在 IE10、Chrome 和 Safari 中。如果图像部分透明，则更明显，如modified demo。 container2 在页面首次加载时按预期调整大小，但如果调整浏览器大小，它会保持其初始宽度。

Opera 的行为与 Firefox 相同。

container2 的收缩包装（它的宽度仅大到适合其内容所需的宽度）似乎在某种程度上取决于具有可用于子内容的已知宽度。对于 Firefox 和 Opera，当为子图像指定 width:auto 时，它使用图像的自然宽度，而不考虑实际的缩放宽度。其他浏览器能够在收缩包装容器2时计算显示宽度，但它们仅在页面首次加载时才这样做；之后，继续使用最初计算的值。

简而言之，Firefox 和 Opera 从不执行宽度计算。而其他浏览器只在页面首次加载时执行，而不是在调整浏览器大小时执行。

解决方法

似乎没有一种明显的方法可以强制浏览器为子图像执行宽度计算；但是，如果需要 container2 的唯一原因是将其他内容绝对定位在图像的右侧，那么还有另一种方法可以完成此操作：

不要在图像周围收缩包装容器，而是在其旁边放置一个元素（inline-block 或浮动），然后使用该元素放置绝对定位的内容。

在两个演示中，container2 都是镜像的兄弟。一个带有文本内容和黑色背景的小元素绝对定位在 container2 中，以演示将内容放置在图像的右侧。为了让事情更明显，container2 的宽度为 10px 和相同的红色背景，但宽度为 0 时效果很好。

【讨论】：

谢谢马特。您的解决方法实际上非常优雅，但不幸的是在我的情况下不可用。事实上，我必须在图像上放置两个元素——一个在左侧，宽度为 40%，另一个在右侧（导航层）。所以我需要一个知道图像宽度的容器。所以我将不得不使用javascript来完成这个。但是我仍然让您的答案成为公认的答案，因为其他人可能会使用您的解决方法。谢谢
顺便说一句，我不明白为什么“display:inline”有效而“display:inline-block”无效。如果将 Container2 设置为“display:inline”，它会随着里面的图像展开。 “display:inline-block”不应该完全一样吗？
@user1254824：我还尝试通过给它position:absolute 或浮动它来收缩包装container2，但这并没有更好的效果。我明白你对display:inline 的意思。这是我使用display:inline 最接近working demo 的结果（这对于绝对定位和嵌套块级元素通常不可靠）。 demo 似乎适用于 FF、Safari、Chrome 和 Opera，但不适用于 IE10。

【解决方案3】：

只需删除<img> 标记中的宽度声明即可。

【讨论】：

谢谢，但这不起作用。甚至在原始代码中都不存在。我只是添加它来帮助 Firefox 计算图像比例。