為什麼 Firefox 和 Edge 對 Flex 專案的百分比填滿和邊距處理方式不同？

揭開Firefox 和Edge 中百分比填充和邊距的神秘面紗

在Flex 項目領域，百分比填充和邊距的傳奇讓使用Firefox 和Edge 的開發者感到困惑。雖然 Chrome 運作良好，但這些瀏覽器表現出的特殊行為讓我們摸不著頭腦。

根據 Flexbox 規範，Flex 項目在填充或邊距百分比方面可能有點難以預測。這是問題的根源：

多種邊距/填充解決機制：

Flexbox 規範在計算這些維度的百分比時允許兩種可能的解釋：

1. 基於軸的分辨率：百分比是相對計算的到項目自己的軸（例如，寬度為左/右，高度為頂部/底部）。
2. 內聯軸分辨率：所有百分比都是相對於項目的內聯軸計算的（即，寬度）。

Firefox 和 Edge 採取了不同的做法，導致了它們的不一致 行為。這種變化源於瀏覽器對分辨率機制的選擇，導致以下結果：

Firefox 的解釋：

• 填充和邊距的百分比根據填充和邊距的百分比根據填充和邊距的百分比根據行內軸，水平垂直書寫時總是寬度

Edge的解釋：

• Firefox 尚未更新到最新的Flexbox 規範，因此遵循舊版

解決方案：

為了確保所有瀏覽器的行為一致，請避免在Flex 專案上使用百分比填充和邊距。遵循這項重要建議，您可以避免跨瀏覽器不一致，否則可能會困擾您的程式碼。

以上是為什麼 Firefox 和 Edge 對 Flex 專案的百分比填滿和邊距處理方式不同？的詳細內容。更多資訊請關注PHP中文網其他相關文章！