flexbox 對齊項目：在 chrome 與 firefox 上的中心渲染不同

Question

在使用flexbox將div居中在另一個div中時，我注意到 firefox 和 chrome 的渲染方式不同。

就我而言，我有 3 個 div。 每個都有一個display:flex和justify-content:center & align-items:center 。

在 Chrome 上：最里面的 div 似乎有點right ，而不是正好在center 。

在 Firefox 上： div 正確呈現在其父 div 的中心。

相同的代碼可以在這里找到： https://codesandbox.io/s/nice-pine-q63b5?file=/src/App.js

Firefox 版本： 69.0（64 位）

Chrome 版本： 84.0.4147.105（64 位）

macOS Catalina： 10.15.6

Answer 1

這是由於像素精度。 Chrome 無法正確顯示帶有像素小數的位置，而 Firefox 則沒有。 由於您的子元素的寬度為 7px，而父元素的寬度為 14px，因此子元素的邊距為 3.5px，但四舍五入為 4px。 如果您將孩子的 with 設置為 6px 或 8px，或者您的父母將其設置為 15px，它將在 Chrome 中得到修復。

編輯：在某些情況下，您似乎可以強制 Chrome 通過使用元素寬度中的十進制像素來計算十進制像素。 正在進行一些匯總，似乎您需要仔細檢查每種情況，但顯然百分比和相對單位（rem、em、vw、vh）更可靠。 請參閱示例：

• 黃色在 Chrome 中失敗。
• 橙色在 Firefox 中失敗。
• 藍綠色在這兩個方面都失敗了。
• 白色，工作准確嗎？

 div { width: 13px; height: 13px; background: black; margin: 5px; display: flex; float: left; align-items: center; justify-content: center; font-size: 14px; } div:after{ content: ''; background: white; } div:nth-child(1):after { width: 7px; height: 7px; } div:nth-child(2):after { width: 6px; height: 6px; background: teal; } div:nth-child(3):after { width: 6.1px; height: 6.1px; background: orange; } div:nth-child(4):after { width: 42%; height: 42%; } div:nth-child(5):after { width: 50.6%; height: 50.6%; background: orange; } div:nth-child(6):after { width: .43em; height: .43em; background: orange; } div:nth-child(7) { width: 12.5px; height: 12.5px; } div:nth-child(7):after { width: 6px; height: 6px; background: yellow; } div:nth-child(8) { width: 1.34%; height: 12.5px; } div:nth-child(8):after { width: 5.5px; height: 5.5px; background: yellow; }

 <div title="pixels if subtraction equals integer works"></div> <div title="pixels if subtraction equals decimal is bugged"></div> <div title="if you use decimal pixels in the child bugged in Firefox"></div> <div title="percentage seems to work"></div> <div title="decimal percentage might fail in Firefox"></div> <div title="em also works"></div> <div title="decimal pixels in the parent is bugged"></div> <div title="parent's % + child decimal pixels also bugged"></div>