CSS Flex的显示方式与Chrome中的相同Flex项目不同

如何解决CSS Flex的显示方式与Chrome中的相同Flex项目不同

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

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

items: [
  {
    id: 1
    item: {
      id: 27,product_id_number: "123",type: "Equipment",name: "Item1"
    }
    item_id: 27
    serial_no: null
    stock_id: 1
  },{
    id: 2
    item: {
      id: 27,{
    id: 3
    item: {
      id: 28,type: "Non-Equipment",name: "Item2"
    }
    item_id: 28
    serial_no: null
    stock_id: 1
  },]

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

中

这里是演示图像image，第二个项目的矩形没有右边距。

我该如何解决？谢谢！

解决方法

如果我理解正确，像素是可以使用的最小单位。这意味着小于1的像素将根据浏览器的舍入行为舍入为0px或1px。在您的情况下，rect类的边距右边小于1px。只要避免使用小于1像素的像素即可。

,

每个浏览器都以自己的方式计算空间，因此当我们处理像素分数时，可能会出现细微的差异。任何会引起进一步计算的因素（例如使用flex或比例转换）都会使情况变得更加复杂。

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

下面的代码段使用.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>