為什麼 Chrome 和 Firefox 在區塊級元素上渲染百分比高度不同？

Chrome 和Firefox 中的高度渲染不同

問題：

將區塊級元素的高度設定為百分比時（例如，1%）沒有明確設定其父級的高度，為什麼Chrome 和Firefox 會計算高度不同的是，Chrome會考慮子元素的下邊距，而 Firefox 不會？

答案：

CSS 標準規定，如果未明確指定包含區塊的高度，則使用百分比height 計算為「auto」。

但是，不同的瀏覽器已經實現了此規定不同的是：

• Webkit 瀏覽器（Chrome、Safari） 堅持傳統的解釋，要求父級有一個設定的百分比高度才能對流入的子級起作用。
• Firefox 和 IE 擴大了他們的解釋，接受彈性高度作為好吧。

這種與規範的偏差導致了渲染不一致，有些瀏覽器使用彈性高度，而其他瀏覽器則需要設定父級高度。

替代方案：

為了確保在所有瀏覽器中呈現一致的渲染，請考慮使用以下其中一種替代方案：

• 將父級的顯示設為「flex ”以使用align-items自動啟用子級的全高：stretch。
• 使用位置: 分別在父元素和子元素上使用絕對值和position:relative，子元素的高度為：100%；寬度：100%。即使沒有指定父元素高度，這也允許百分比高度作用於子元素。

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