伪元素中的 Padding-top 在 Firefox 中不起作用（但在 Chrome、Safari 中起作用）[重复]答案

【问题标题】：Padding-top in pseudo element won't work in Firefox (but does in Chrome, Safari) [duplicate]伪元素中的 Padding-top 在 Firefox 中不起作用（但在 Chrome、Safari 中起作用）[重复]
【发布时间】：2016-03-20 10:14:52
【问题描述】：

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

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

.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”添加到伪元素。

【问题讨论】：

谢谢！！抱歉我没找到。
谢谢，我在 Firefox 上的伪元素上的百分比填充时遇到了同样的问题。显示：表格；修好了。

标签： html css flexbox

【解决方案1】：

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

对于块布局，填充的百分比是根据包含块的宽度来解析的，即使填充是在垂直方向上。

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

但是，浏览器不同意。然后Firefox根据高度解析padding-top: 100%，Chrome根据宽度解析。

在火狐的情况下，由于包含块的高度取决于内容的高度，而伪元素的内边距是内容的一部分，所以无法解析百分比（这将是循环引用）。然后它变成0。这类似于 height: 100% 在块布局中父级具有 height: auto 的情况。

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

【讨论】：