Question

将div与div放在另一个flexbox的内部时，我注意到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。如果您将孩子的设置为6px或8px，或者将父母的设置为15px，则在Chrome中会得到修复。

编辑：在某些情况下，您可以强制Chrome通过使用元素宽度中的小数像素来计算小数像素。 There is some rounding up going on，似乎您需要仔细检查每种情况，但显然百分比和相对单位（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>

flexbox align-items：chrome和firefox的中心渲染方式不同

1 个答案: