代码之家 › 专栏 › 技术社区 › soundquiet

cssflexdisplay在Chrome中对相同的flex项的行为不同

flexbox layout css html javascript

soundquiet · 技术社区 · 6 年前

我有几个相同的flex项,包含一个矩形 span 具有 margin-right ,和 text span 由于Chrome等浏览器的字体大小限制而缩放。我把它们放在一个flex容器中,但是我发现其中一些在Chrome中是不正确的 右边距 直肠的 ,但火狐没问题。

#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 ,第二项的矩形没有右边距。

2 回复 | 直到 6 年前

FluffyKitten 6 年前

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

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

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

mkinoshi 6 年前

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