CSS flex display 与 Chrome 中相同的 flex 项目的行为不同答案

【问题标题】：CSS flex display acts differently with same flex items in ChromeCSS flex display 与 Chrome 中相同的 flex 项目的行为不同
【发布时间】：2020-12-09 09:05:03
【问题描述】：

我有几个相同的 flex 项目，包含一个矩形 span 和 margin-right，以及一个由于 Chrome 等浏览器的字体大小限制而缩放的 text span。我将它们放入 flex 容器中，但我发现其中一些在 Chrome 中不正确，没有矩形 span 的 margin-right，但 Firefox 很好。

#flex-container {
  display: flex;
  width: 50px;
}

.flex-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  align-content: space-around;
  margin-right: 2.1875px;
  position: relative;
  height: 7px;
}

.rect {
  width: 5px;
  height: 5px;
  display: inline-block;
  background: rgb(6, 74, 105);
  margin-right: 0.875px;
}

.text {
  position: relative;
  font-size: 12px;
  display: inline-block;
  vertical-align: middle;
  transform: scale(0.5);
  transform-origin: left center;
  width: 20.5px;
}

<div id="flex-container">
  <div class="flex-item">
    <span class="rect"></span>
    <span class="text">Mazda</span>
  </div>
  <div class="flex-item">
    <span class="rect"></span>
    <span class="text">Mazda</span>
  </div>
  <div class="flex-item">
    <span class="rect"></span>
    <span class="text">Mazda</span>
  </div>
  <div class="flex-item">
    <span class="rect"></span>
    <span class="text">Mazda</span>
  </div>
  <div class="flex-item">
    <span class="rect"></span>
    <span class="text">Mazda</span>
  </div>
</div>

代码 sn -p 运行结果也是正确的。但不在https://jsfiddle.net/xgahLv3k/1/

这是演示图片image，第二个项目的矩形没有margin-right。

我该如何解决这个问题？谢谢！

【问题讨论】：

太小了，根本分不清有没有空格！这是您网站的实际大小吗？
@FluffyKitten 是的，我必须保持小尺寸。那么是不是空间太小造成的呢？
@FluffyKitten 哦，我将 rect span 的 margin-right 设置为 1px，现在效果很好！太感谢了！你想发布一个答案然后我可以接受吗？
我们如何证明第二个项目矩形没有边距。这里的代码不起作用，那么我们可以解决任何一个建议，但是你的代码没有问题然后关闭这个问题。
@chandukomati 因为我在演示图像中没有看到任何间隙，所以我称之为no margin-right。现在知道是因为px值太小了。

标签： javascript html css layout flexbox

【解决方案1】：

每个浏览器都以自己的方式计算空间，所以当我们处理像素的分数时，可能会有细微的差异。这可能会因任何导致进一步计算的因素而变得更加复杂，例如使用 flex 或缩放转换。

解决这个问题的最佳方法是使用全像素 - 如果您考虑一下，理论上一个像素是屏幕显示的最小单位，因此小数像素没有意义，浏览器必须进行补偿处理这些值。

下面的 sn-p 对.flex-item 和.rect 使用整个像素，如下所示：

.flex-item {
  margin-right: 2px;
  /* rest of CSS */
}

.rect {
  margin-right: 1px;
  /* rest of CSS */
}

它们是 2.1875 像素 + 0.875 像素，所以现在它加起来是 3 像素的一个不错的回合

工作片段：

#flex-container {
  display: flex;
  width: 50px;
}

.flex-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  align-content: space-around;
  margin-right: 2px;
  position: relative;
  height: 7px;
}

.rect {
  width: 5px;
  height: 5px;
  display: inline-block;
  background: rgb(6, 74, 105);
  margin-right: 1px;
}
.text {
  position: relative;
  font-size: 12px;
  display: inline-block;
  vertical-align: middle;
  transform: scale(0.5);
  transform-origin: left center;
  width: 20px;
}

<div id="flex-container">
    <div class="flex-item">
      <span class="rect"></span>
      <span class="text">Mazda</span>
    </div>
    <div class="flex-item">
      <span class="rect"></span>
      <span class="text">Mazda</span>
    </div>
    <div class="flex-item">
      <span class="rect"></span>
      <span class="text">Mazda</span>
    </div>
    <div class="flex-item">
      <span class="rect"></span>
      <span class="text">Mazda</span>
    </div>
    <div class="flex-item">
      <span class="rect"></span>
      <span class="text">Mazda</span>
    </div>
  </div>

【讨论】：

是的，有道理，谢谢！顺便说一句，您知道为什么矩形在 5px 高度和 5px 宽度下看起来略有不同，例如结果中的第二个和第三个？
@soundquiet 他们看起来不错，我已经使用元素检查器检查了它们，它们都是 5px * 5px。我不确定为什么你对它们的看法不同。它与正方形无关，但对于文本，您为什么使用字体 12，然后将其缩放 50%？字体大小为 6px 将得到相同的效果，而没有任何潜在的缩放副作用。此外，您的容器只有 50 像素，对于内容来说不够宽 - 目前它会溢出，但如果您的项目中有相邻元素，它可能会导致问题。

【解决方案2】：

如果我理解正确，像素是您可以使用的最小单位。这意味着小于 1 的像素会根据浏览器的舍入行为四舍五入为 0px 或 1px。在您的情况下，rect 类的 margin-right 小于 1px。尽量避免使用小于 1px 的像素。

【讨论】：