僞元素中的填充頂部在Firefox中不起作用（但在Chrome，Safari中）

Question

因此，我的目標是擁有三個方形框，其邊根據瀏覽器的大小展開/收縮。每個盒子只包含一行文本，所以想法是有大量的填充來填充額外的空間。

該網站使用Flexbox的構建，我想我通過使用有一個很好的解決方案一：前繼承父元素的寬度和使用它的長度作爲填充頂：

.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%; 
} 

編輯：最簡單的解決，只需要添加「顯示：表」僞元素。

Answer 1

這是因爲你使用了一個百分比。

使用塊佈局，根據包含塊的寬度來分辨填充的百分比，即使填充處於垂直方向。

但是，flexbox想改變這種行爲，並根據包含塊的寬度或高度來解決填充問題，具體取決於填充方向。

但是，瀏覽器並不同意。然後，Firefox根據高度來解析padding-top: 100%，Chrome根據寬度進行解析。

在Firefox的情況下，由於包含塊的高度取決於內容的高度，並且僞元素的填充是內容的一部分，所以百分比不能被解析（這將是一個循環參考）。然後它變成0。這與height: 100%的情況類似，其中母體具有height: auto的塊佈局。

您可以通過使用顯式長度而不是百分比來修復它。