javascript - CSS flex display 与 Chrome 中的相同 flex 元素不同

Question

我有几个相同的 flex 元素，包含一个带有 margin-right 的矩形 span，以及一个根据字体缩放的 text span Chrome 等浏览器的大小限制。我将它们放入一个 flex 容器中，但我认为其中一些在 Chrome 中是不正确的，没有 margin-right 的 rect span，但 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>

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

这是演示图像 image ，第二个元素的矩形没有边距。

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

Answer 1

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

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

下面的代码片段对 .flex-item 和 .rect 使用整个像素，如下所示:

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

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

它们是 2.1875px + 0.875px 所以现在它加起来是 3px 的一个很好的回合

工作片段:

#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>