在 FireFox 中高度为 100% 的内联块包含图像折叠

Posted 2023-03-06

【中文标题】在 FireFox 中高度为 100% 的内联块包含图像折叠

【英文标题】：Inline-block conainting image with height 100% collapsing in FireFox

【发布时间】：2014-09-23 19:32:43

【问题描述】：

我对仅在 FireFox (cur.ver. 31) 中可见的 CSS 有疑问。 我正在尝试制作一个响应式布局，其中有一排图像（带有链接），它们居中，并且具有与视口宽度相同的高度和比例。我的方法是创建一个具有固定纵横比的容器，并将图像放在里面（每个图像都放在一个单独的<a> 标签内），将它们居中，并将它们的高度缩放到容器高度。它工作得很好，除了在 FireFox 中。 为了实现这一点，我将display: inline-block; height: 100% 应用到<a> 标签和height: 100%; width: auto 到<img> 标签。由于某些（未知）原因，FF 没有正确计算<a> 标签的宽度（当它包含上述<img> 标签时）并且它水平折叠。结果是，所有宽度为 0 的 <a> 都彼此非常靠近（仅由空格分隔），并且图像彼此重叠。我在 <a> 标签上使用 display: block; float: left; 得到相同的结果。

CSS

.container-ratio 
    width: 100%;
    height: 0;
    position: relative;
    padding-bottom: 10%;
    background: #ddd;

.container-inner 
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #ddf;
    text-align: center;

.block 
    display: inline-block;
    height: 100%;
    background: #f00;

.block img 
    height: 100%;
    width: auto;
    display: block;

HTML

<div class="container-ratio">
    <div class="container-inner">
        <a class="block">
            <img src="http://placehold.it/100x80/42bdc2/FFFFFF&text=No1">
        </a>
        <a class="block">
            <img src="http://placehold.it/150x80/242bdc/FFFFFF&text=No2">
        </a>
        <a class="block">
            <img src="http://placehold.it/200x80/c242bd/FFFFFF&text=No3">
        </a>
    </div>
</div>

【参考方案1】：

我认为这就是你想要做的。 Demo 您在 .block 上没有宽度，在 .block img 上没有自动宽度。 必须是百分比。

.container-ratio 
    width: 100%;
    height: 0;
    position: relative;
    padding-bottom: 10%;
    background: #ddd;

.container-inner 
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #ddf;
    text-align: center;

.block 
    display: inline-block;
    width:20%;
    height: 100%;
    background: #f00;

.block img 
    height: 100%;
    width:100%;
    display: block;

【讨论】：

我也有同样的问题。在.block 上添加width: 20%; 会强制每个图像的宽度正好为20%，高度为100%。如果每个图像具有相同的比例，就可以了。否则它会拉伸它们。想要的行为（在 Chrome 和 Safari 上测试和工作）是强制高度并让图像采用正确显示所需的宽度。

【参考方案2】：

问这个问题已经快两年了，Firefox 仍然表现出这种行为。 因此，对于处于相同情况的任何人，这里是 solution（仅在 Chrome 49.0 和 Firefox 45.0.1 上测试过）。

编辑：

最初，我使用内联包装器 div 和两个图像实例，其中一个没有显示，仅用作虚拟对象。看来这不是必需的，可以看到here。

总而言之，您似乎不能在 Firefox 中以这种方式使用 inline-block，但您需要做的就是将锚点和图像保留为内联元素。只要锚的父元素是块级元素而不是 inline-block，并且指定了它的高度，那么你就会得到预期的结果。

如果出于某种原因确实需要 inline-block，我不知道如何解决这个问题。

注意：

注意 .block 类上的“font-size: 0;”，用于删除图像之间的空格。如果没有这个，图像会被类似于链接的空格分隔。如果图像之间需要一些空间，那么像小提琴中那样添加一些右边距或左边距将是一个解决方案。

此外，虽然 .block 类名不再合适，但我将其保留为与 OP 保持一致。

修改后的 CSS

.container-ratio 
    width: 100%;
    height: 0;
    position: relative;
    padding-bottom: 10%;
    background: #ddd;

.container-inner 
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #ddf;
    text-align: center;

.block 
    font-size: 0;

.block img 
    height: 100%;
    margin-right: 1%;