為什麼 Firefox 和 Chrome 渲染 Flexbox 的方式不同，要如何修復？

Firefox 和 Chrome 中的 Flexbox 渲染差異

在 Web 開發領域，跨瀏覽器渲染問題可能會帶來重大挑戰。 Flexbox 用戶面臨的此類問題之一是在 Firefox 和早期版本的 Chrome 中觀察到的不一致行為。

在 Chrome 47 中，「.scroll」div 會按預期運行，利用 Flexbox 實現 100% 高度。然而，在 Firefox 中，相同的 div 遵循內容高度，導致不正確的滾動行為。這引發了針對這種渲染差異的跨瀏覽器解決方案的問題。

Flexbox 規範的修改（將 Flex 項目的預設最小大小設為等於內容）導致了這種渲染差異。要解決此問題，開發人員可以透過明確將 min-width 和 min-height 設為 0 來覆寫此預設值。

**.content {

}
**

但是，Chrome 最近的更新帶來了行為上的變化。 Chrome 48 模擬 Firefox 之前的渲染，導致相同的解決方案適用於兩種瀏覽器。

CSS 2.1 中定義的 min-width 和 min-height 的初始 auto 值已替換為新的 auto value，它將最小大小設為內容的大小。這引入了 Flexbox 元素的預設渲染行為的變化，導致瀏覽器之間觀察到的不一致。

以上是為什麼 Firefox 和 Chrome 渲染 Flexbox 的方式不同，要如何修復？的詳細內容。更多資訊請關注PHP中文網其他相關文章！