為什麼 Chrome 和 Firefox 對百分比和「自動」值的渲染高度不同？

Chrome 和Firefox 中的高度呈現方式不同

在CSS 中，將區塊級元素的高度設定為百分比或“自動”，而不指定父元素的高度可能會導致不同瀏覽器的高度計算不同。例如，Chrome 和 Firefox 表現出不同的行為。

為什麼「height: 1%」計算為 Auto

在 height: 1% 的範例中，Chrome 將 div 的高度計算為margin-bottom 加上 p 元素的內容高度。這是因為，根據 CSS 規範，當父級的高度未明確設定且元素未絕對定位時，將計算「auto」百分比。

父級的 Flex 高度

另一個Chrome 和 Firefox 之間的差異在於它們對 Flexbox 中百分比高度的處理。 Chrome 和 Safari 優先考慮父級的伸縮高度，而 Firefox 和 IE11/Edge 優先考慮父級的整體高度。

瀏覽器解釋

CSS 規範中有關高度百分比的語言有些模糊，留有解釋空間由瀏覽器製造商提供。傳統的解釋要求在父級上設定一個高度值，然後是 Chrome 和 Safari 等瀏覽器。但是，Firefox 和 IE 已擴展此解釋以包括彈性高度。

替代解決方案

為了確保跨瀏覽器的高度渲染一致，請考慮以下替代方案：

• 使用在父級上顯示：flex和在父級上顯示：flex和在子級上對齊項目：拉伸以將子級的高度設定為完整的父級高度。
• 在子級上套用位置：絕對高度：100% 和寬度：100%，同時在父級上設定位置：相對。

以上是為什麼 Chrome 和 Firefox 對百分比和「自動」值的渲染高度不同？的詳細內容。更多資訊請關注PHP中文網其他相關文章！