html – 16:9填充底部技巧在FireFox中无法正常工作

我一直在尝试为内容块实现响应式16:9比率技巧,并在Chrome中获得预期结果时,其他浏览器(如FireFox和Edge)显示完全不同而不是预期.

.streamContainer {
  position: absolute;
  width: 80%;
  height: calc(100% - 120px);
  display: flex;
  bottom: 0px;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  transition: height 0.5s;
  background: blue;
}
.streamRatio {
  position: relative;
  width: 100%;
  padding: 56.25% 0 0 0;
  content: '';
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: block;
  background: red;
  height: 0;
}
.streamInner {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: green;
}
<div class="streamContainer">
  <div class="streamRatio">
    <div class="streamInner">
      Content Goes Here
    </div>
  </div>
</div>

以下图片显示了Chrome上的预期结果以及FireFox上的意外结果:

Chrome
Chrome – Imgur
FireFox
FireFox – Imgur

颜色块就是帮助可视化不同的盒子.

最佳答案
您的示例中的问题是应用于.streamRatio的顶部填充是根据Firefox中.streamContainer的高度计算的,但是与Chrome中的.streamRatio的宽度相关(给出您期望的结果).

哪一个是对的?好吧,因为事实证明两种实现都是正确的:

Percentage margins and paddings on flex items can be resolved against either:

  • their own axis (left/right percentages resolve against width,
  • top/bottom resolve against height), or, the inline axis
    (left/right/top/bottom percentages all resolve against width)

A User Agent must choose one of these two behaviors.

CSS灵活的盒子布局模块1级(Flex Item Margins and Paddings)

因此,W3C建议您不要在弹性项目上使用基于百分比的填充.

要解决此问题,您需要删除flexbox功能并使用不同的方法垂直对齐容器,在这种情况下使用top:50%;和转换:translateY(-50%);:

.streamContainer {
  background: blue;
  bottom: 0;
  box-sizing: border-box;
  height: calc(100% - 120px);
  position: absolute;
  transition: height 0.5s;
  width: 80%;
}
.streamRatio {
  background: red;
  box-sizing: border-box;
  display: block;
  height: 0;
  padding: 56.25% 0 0 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
}
.streamInner {
  background: green;
  bottom: 0;
  height: 100%;
  left: 0;
  right: 0;
  position: absolute;
  top: 0;
}
<div class="streamContainer">
  <div class="streamRatio">
    <div class="streamInner">
      Content Goes Here
    </div>
  </div>
</div>

转载注明原文:html – 16:9填充底部技巧在FireFox中无法正常工作 - 代码日志