Javascript CSS flex display对Chrome中相同的flex项的作用不同

我有几个相同的flex项目，其中包含一个矩形

span

，带有

margin right

，以及一个

文本span

，这是由于Chrome等浏览器的字体大小限制而缩放的。我把它们放在一个flex容器中，但我发现其中一些在Chrome中是不正确的，没有rect

span

的

margin right

，但是Firefox很好

#柔性容器{
显示器：flex；
宽度：50px；
}
.弹性项目{
显示器：flex；
弯曲方向：行；
对齐项目：居中；
对齐内容：周围的空间；
右边距：2.1875px；
位置：相对位置；
高度：7px；
}
.直肠{
宽度：5px；
高度：5px；
显示：内联块；
背景：rgb（6,74,105）；
右边距：0.875px；
}
.文本{
位置：相对位置；
字体大小：12px；
显示：内联块；
垂直对齐：中间对齐；
变换：比例（0.5）；
变换原点：左中心；
宽度：20.5px；
}

马自达
马自达
马自达
马自达
马自达

如果我理解正确，像素是可以使用的最小单位。这意味着，根据浏览器上的舍入行为，小于1的像素将舍入为0px或1px。在您的例子中，

rect

类的右边距小于1px。尽量避免使用小于1px的像素。

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

处理这个问题的最好方法是使用全像素——如果你仔细想想，像素理论上是屏幕显示的最小单位，因此像素的分数没有意义，浏览器必须进行补偿来处理这些值

下面的代码片段对

.flex item

和

.rect

使用整像素，如下所示：

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

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

他们当时是2.1875px+0.875px，所以现在加起来是一个相当不错的三倍

工作片段：

#柔性容器{
显示器：flex；
宽度：50px；
}
.弹性项目{
显示器：flex；
弯曲方向：行；
对齐项目：居中；
对齐内容：周围的空间；
右边距：2px；
位置：相对位置；
高度：7px；
}
.直肠{
宽度：5px；
高度：5px；
显示：内联块；
背景：rgb（6,74,105）；
右边距：1px；
}
.文本{
位置：相对位置；
字体大小：12px；
显示：内联块；
垂直对齐：中间对齐；
变换：比例（0.5）；
变换原点：左中心；
宽度：20px；
}

马自达
马自达
马自达
马自达
马自达

它太小了，无法分辨是否有空间！这是你网站的实际尺寸吗？@FluffyKitten是的，我必须保持一个小尺寸。那么这是因为空间太小吗？@FluffyKitten-oh我将矩形跨度的边距设置为1px，现在效果很好！非常感谢你！你想发布一个答案然后我可以接受吗？我们如何证明第二个项目矩形没有右边空白。这里的代码不起作用，那么我们可以解决建议中的任何一个，但u r代码中没有问题，然后关闭此问题。@chandukomati，因为我在演示图像中没有看到间隙，所以我将其称为

无边距右侧

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