為什麼 Chrome 和 Firefox 渲染區塊元素高度不同？

Chrome 和Firefox 中的高度渲染不同

當將區塊級元素的高度設定為auto 或0~100% 且未顯式指定父元素的height屬性時， Chrome 中計算的高度可能與Firefox 不同，特別是當元素有下邊距時。

為什麼要區別？

W3C CSS2.1 規範規定，如果未明確指定包含區塊的高度，則 height: 1% 應計算為 auto。然而，Chrome 遵循更傳統的解釋，需要在父元素上設定高度屬性，以便百分比高度適用於子元素。

另一方面，Firefox 和 IE 最近擴大了它們的解釋以接受 flex高度作為百分比高度的參考。這種與傳統解釋的偏差導致了瀏覽器中渲染的差異。

替代解決方案

要在Chrome 和Firefox 中實現所需的行為，請考慮以下替代方案：

• 將display: flex 應用於父級，這會設定align-items:stretch並強制子級展開到父級的完整位置height.
• 在父級上使用position:relative 和position:absolute；高度：100%；寬度：孩子身上的 100%。此方法覆蓋了 Chrome 中的百分比高度問題。

以上是為什麼 Chrome 和 Firefox 渲染區塊元素高度不同？的詳細內容。更多資訊請關注PHP中文網其他相關文章！