為什麼 Chrome 和 Firefox 在使用百分比高度計算區塊級元素的高度方面存在差異？

Chrome 和Firefox 中渲染高度的差異

問題

將區塊級元素的高度設定為「auto」或「0~100% ” " 沒有明確指定父級的高度會導致Chrome 和Firefox 中的高度計算不同。 1%」的情況下，Chrome 會將高度計算為下邊距加上內容高度，而Firefox 則不會。儘管CSS 規範規定，當未明確設定父級高度時，「height: 1%」應計算為“auto”，但此行為有所不同。提供了以下標準對於瀏覽器，瀏覽器製造商可以自由地以不同的方式實施這些標準。傳統的規範解釋，要求在父元素上設定百分比高度才能在子元素上運作。最近擴大了它們的解釋範圍，也接受彈性高度。

顯示Flex：

在父級上設定“display: flex”，它會自動設定“align-items:

絕對定位：

在父級上設定「position:relative」和「position:absolute;width; ：100%」對孩子來說。這允許在父級上不指定高度的情況下使用百分比高度。

以上是為什麼 Chrome 和 Firefox 在使用百分比高度計算區塊級元素的高度方面存在差異？的詳細內容。更多資訊請關注PHP中文網其他相關文章！