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

概述我一直在尝试为内容块实现响应式16：9比率技巧,并在Chrome中获得预期结果时,其他浏览器(如FireFox和Edge)显示完全不同而不是预期. .streamContainer { position: absolute; width: 80%; height: calc(100% - 120px); display: flex; bottom: 0px; flex-di 我一直在尝试为内容块实现响应式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 >  <div >    <div >      Content Goes Here    </div>  </div></div>

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

Chrome – Imgur

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建议您不要在d性项目上使用基于百分比的填充.

要解决此问题,您需要删除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 >  <div >    <div >      Content Goes Here    </div>  </div></div>

总结

以上是内存溢出为你收集整理的html – 16：9填充底部技巧在FireFox中无法正常工作全部内容，希望文章能够帮你解决html – 16：9填充底部技巧在FireFox中无法正常工作所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。