伪元素中的 Padding-top 在 Firefox 中不起作用（但在 Chrome、Safari 中有效）

Question

所以，我的目标是让三个方形框的边根据浏览器的大小扩展/收缩。每个框只包含一行文本，所以我们的想法是有大量的填充来填充额外的空间。

该站点是使用 flexbox 构建的，我认为我有一个优雅的解决方案：使用 :before 继承父元素的宽度并将其长度用作填充顶部：

.square:before {
content:''; 
padding-top:100%;
}

这在大多数浏览器中都可以完美运行，但我很沮丧地看到 Firefox 出现问题。这是其余的代码和一个 JSFiddle。有什么建议？

http://jsfiddle.net/uLqqop0q/5/

你CSS~~

#container {
display: flex;
width: 100%;
flex-direction: row;
justify-content: center;
max-width: 1200px;
margin: 0 auto;
}

.square {
display: flex;
flex: 1 0 auto;
margin: 10px;
border: 10px solid blue;
justify-content: center;
align-items: center;
color: #111111;
font-size: 1.7rem;
height: auto;  
text-align: center;
vertical-align: middle;
}

.square:before {
content:''; 
padding-top:100%;
}

编辑：最简单的修复 - 只需将“display:table”添加到伪元素。

Answer 1

那是因为你使用了百分比。

使用块布局时，即使填充位于垂直方向，填充的百分比也会根据包含块的宽度来解析。

然而，flexbox 希望改变这种行为，并根据包含块的宽度或高度（取决于填充的方向）来解析填充。

然而，浏览器并不同意。然后，Firefoxpadding-top: 100%根据高度进行解析，Chrome 根据宽度进行解析。

对于Firefox，由于包含块的高度取决于内容的高度，而伪元素的填充是内容的一部分，因此无法解析百分比（这将是循环引用） 。那么就变成了0。这类似于height: 100%父级具有 的块布局中的情况height: auto。

您可以通过使用显式长度而不是百分比来修复它。