我的CSS问题只在FireFox中可见(cur.ver.31).
我正在尝试制作一个响应式布局,带有一排图像(带有链接),这些图像居中,并且具有与视口宽度相同的高度和比例.我的方法是创建一个具有固定宽高比的容器,并将图像放在里面(每个图像在一个单独的< a>标签内),居中,然后将它们的高度缩放到容器高度.它在FireFox中除外,效果很好.
为此,我应用了一个显示：inline-block;高度：100％至< a>标签和高度：100％; width：auto to< img>标签.对于某些(未知)原因,FF不计算< a>的宽度.正确标记(当它包含上述< img>标记时)并且它水平折叠.结果是,所有< a>具有0宽度的位置彼此非常靠近(仅由白色空间分开),并且图像彼此重叠.我用display：block获得相同的结果;向左飘浮;在< 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>

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

}