html – 伪元素中的填充顶部在Firefox中不起作用(但在Chrome,Safari中)

参见英文答案 > Flex elements ignore percent padding in Firefox                                    4个
因此,我的目标是根据浏览器的大小设置三个方框,其边长/缩小.每个框只包含一行文本,因此想法是有大量的填充来填充额外的空间.

该网站是使用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”添加到伪元素.

最佳答案
那是因为你使用百分比.

使用块布局,即使填充在垂直方向,也会根据包含块的宽度来解析填充的百分比.

但是,flexbox想要更改此行为,并根据包含块的宽度或高度来解析填充,具体取决于填充的方向.

但是,浏览器并不同意.然后,Firefox根据高度解析填充顶部:100%,Chrome根据宽度进行处理.

在Firefox的情况下,由于包含块的高度取决于内容的高度,并且伪元素的填充是内容的一部分,因此无法解析百分比(它将是循环引用) .然后它变为0.这类似于高度的情况:在父布局高度为auto的块布局中为100%.

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

转载注明原文:html – 伪元素中的填充顶部在Firefox中不起作用(但在Chrome,Safari中) - 代码日志