為什麼我的 Flexbox 元素在 Firefox 和 Chrome 48 中渲染不一致？

Firefox 和Chrome 48 中Flexbox 的跨瀏覽器渲染問題

背景

A最近對Flexbox 規範的更新對Flex 專案的預設最小尺寸進行了更改匹配內容大小。雖然 Chrome 47 正確實現了此更改，但 Chrome 48 和 Firefox 卻出現了 Flexbox 元素渲染的問題。

問題

在 Firefox 中，某些 Flexbox 元素內容溢位行為出乎意料。雖然 Chrome 47 可以正確渲染這些元素，但 Chrome 48 現在可以匹配 Firefox 的行為。

解決方案

要解決此問題，您可以明確覆蓋這些元素的預設最小大小使用以下CSS 屬性：

.content {
    min-width: 0;
    min-height: 0;
}

這可確保Flexbox 元素可以正確縮小以適合其內容，解決渲染問題。

規範中的詳細資訊

Flexbox 規範指出：

「為了為Flex 專案提供更合理的預設最小尺寸，該規範引入了一個新的auto 值作為CSS 中定義的min-width 和min-height屬性的初始值2.1."

對Chrome 48 的影響

根據觀察，Chrome 48 中Flexbox 更新的最初實現模仿了Firefox 的行為，導致了類似的渲染問題。然而，後續報告表明 Chrome 48 已更新其渲染行為以匹配上面提供的解決方案。

結論

透過明確將Flex 專案的最小大小設為0雙向，您可以有效解決Firefox 和Chrome 48 在處理溢位內容時遇到的渲染問題。

以上是為什麼我的 Flexbox 元素在 Firefox 和 Chrome 48 中渲染不一致？的詳細內容。更多資訊請關注PHP中文網其他相關文章！