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

Question

我一直在尝试为内容块实施响应式16：9比例技巧，同时在Chrome中获得预期效果，其他浏览器（例如FireFox和Edge）则完全不同地显示它，而不是按预期显示。

＆＃13;

＆＃13;

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

＆＃13;

<div class="streamContainer">
  <div class="streamRatio">
    <div class="streamInner">
      Content Goes Here
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

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

Chrome - Imgur
FireFox - Imgur

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

Answer 1

您的示例中的问题是，应用于.streamRatio的顶部填充是根据Firefox中height的{​​{1}}计算的，而不是.streamContainer Chrome中的width（为您提供所期望的结果）。

哪一个是对的？好吧，事实证明两种实现都是正确的：

  

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

     

  
• 他们自己的轴（左/右百分比解决宽度，
  
• 顶部/底部解析高度），或者是内联轴   （左/右/上/下百分比全部解决宽度）
  

     

用户代理必须选择以下两种行为之一。

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

出于这个原因，W3C建议您不要在弹性项目上使用基于.streamRatio的百分比。

要解决此问题，您需要删除flexbox功能，并使用不同的方法在{@ 1}}和padding中使用不同的方法垂直对齐容器：

top: 50%;

transform: translateY(-50%);

Answer 2

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

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

Answer 3

在display：flex内部，Firefox不接受百分比填充。

我添加了

display:table;
padding-bottom:56.25%;

它解决了问题，尽管我不确定它是否还有其他问题。使用IE Chrome Safari和Firefox测试后，我看不到任何问题。至少在最新版本中。