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

Question

我一直在尝试为内容块实现响应式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 - Imgur
FireFox - Imgur

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

Answer 1

你在你的例子有问题的是,顶部填充应用到.streamRatio相对于正在计算height的.streamContainer在Firefox,但反对width的.streamRatio在Chrome(给你你所期望的结果).

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

Flex项目的边距和填充百分比可以通过以下任一方式解决:

• 他们自己的轴(左/右百分比对宽度,
• 顶部/底部解析高度),或者,内联轴(左/右/上/下百分比都解决宽度)

用户代理必须选择这两种行为之一.

CSS灵活的盒子布局模块1级(Flex项目边距和填充)

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

要解决此问题,您需要删除flexbox功能并使用不同的方法垂直对齐容器,在这种情况下使用top: 50%;和transform: 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>

Answer 2

将填充移动到:: before伪元素.streamRatio将使其在Firefox和Edge上正确显示.

.streamRatio::before {
  display: block;
  content: '';
  padding: 56.25% 0 0 0;
}