时间戳

首页 > 解决方案 > CSS flex display 与 Chrome 中相同的 flex 项目的行为不同

javascript - CSS flex display 与 Chrome 中相同的 flex 项目的行为不同

问题描述

由于 Chrome 等浏览器的字体大小限制，我有几个相同的弹性项目，其中包含一个span带有的矩形margin-right和一个缩放的。text span我将它们放入一个 flex 容器中，但我认为其中一些在 Chrome 中不正确，没有margin-rightrect 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/

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

我怎样才能解决这个问题？谢谢！

标签： javascripthtmlcsslayoutflexbox

解决方案

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

推荐阅读