我一直在尝试为内容块实现响应式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上的意外结果：
颜色块就是帮助可视化不同的盒子.
解决方法
您的示例中的问题是应用于.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>
