FireFox中高度100%塌陷的内嵌块锥状体图像

Question

我对CSS有一个问题，这个问题只能在FireFox (cur.ver )中看到。31)。我试图做出一个响应的布局，与一行图像(链接)，是居中，具有相同的高度和比例与视口宽度。我的方法是创建一个具有固定高宽比的容器，并将图像放置在其中(每个图像都在一个单独的<a>标记中)，对它们进行中心设置，并将它们的高度缩放到容器的高度。除了在FireFox之外，它运行得很好。为了实现这一点，我将display: inline-block; height: 100%应用于<a>标记，height: 100%; width: auto应用于<img>标记。由于某些(未知的)原因，FF没有正确计算<a>标记的宽度(当它包含上述<img>标记时)，并且它水平折叠。结果是，所有宽度为0的<a>都放置在非常近的位置(仅用空格分隔)，图像相互重叠。对于display: block; float: left;，我在<a>标记上得到了相同的结果。

.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;

}

<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>

Answer 1

我想这就是你想要做的。演示 -- .block上没有宽度，.block img上没有auto宽度。

必须是百分比。

.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;

}

Answer 2

这个问题已经问了将近两年了，火狐仍然表现出这种行为。因此，对于任何处于相同情况的人，这里都有一个解决方案 (仅在Chrome49.0和Firefox45.0.1上进行测试)。

编辑：

最初，我使用了内联包装div和图像的两个实例，其中一个没有显示，只是作为一个虚拟。这似乎没有必要，正如我们可以看到的这里。

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

如果，由于某种原因，内联块是真正需要的，我不知道如何解决这个问题。

注：

注意.block类上的“字体大小: 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%;
}