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>获得了相同的结果。

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>

Answer 1

我认为这就是你要做的事情。 Demo 您在.block和auto上没有宽度.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;

}

Answer 2

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

修改

最初，我使用了内联包装div和两个图像实例，其中一个没有显示，只作为假人。看来这没有必要，可以看出here。

总而言之，似乎你无法在Firefox中使用内联块，但是你需要做的就是将锚点和图像保留为内联元素。只要锚的父级是块级元素而不是内联块，并且指定了它的高度，那么你就可以获得预期的结果。

如果由于某种原因，确实需要内联阻止，我不知道如何解决这个问题。

注意：

小心＆＃34; font-size：0; ＆＃34;在.block类中，用于删除图像之间的空格。如果没有这个，图像就会被表现得像链接的空格分开。如果图像之间需要一些空间，那么在小提琴中添加一些右边距或左边距将是一种解决方案。

此外，虽然.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%; }

在FireFox中高度100％折叠的内联块隐藏图像

2 个答案: