內部和外部div之間的像素大小的間隙-有解無憂

這是 Chrome 中的渲染錯誤嗎？

使用 Google Chrome 107.0.5304.32（官方構建）測驗版（64 位）

.meters {
  display: grid;
  grid-template-columns: 4rem 1fr 3rem;
  grid-auto-rows: 1.3rem;
  align-items: center;
  gap: 0.8rem;
}
.meter {
  display: flex;
  height: 100%;
  border: solid 3px black;
}
.fill {
  background: blue;
}

<div class="meters">
  <p>0 Sterne</p>
  <div class="meter">
    <div class="fill" style="width: 100%;"></div>
  </div>
  <p>27%</p>
  <p>1 Sterne</p>
  <div class="meter">
    <div class="fill" style="width: 10.989%;"></div>
  </div>
  <p>11%</p>
  <p>2 Sterne</p>
  <div class="meter">
    <div class="fill" style="width: 32.4176%;"></div>
  </div>
  <p>32%</p>
  <p>3 Sterne</p>
  <div class="meter">
    <div class="fill" style="width: 11.5385%;"></div>
  </div>
  <p>12%</p>
  <p>4 Sterne</p>
  <div class="meter">
    <div class="fill" style="width: 17.5824%;"></div>
  </div>
  <p>18%</p>
</div>

我在藍色 div 周圍看到白色：

內部和外部 div 之間的像素大小的間隙

如果我將邊框設定為4px或更多，白色就消失了。對于1px，它也可以正常作業。我2px只看到底部是3px白色的，頂部和底部都是白色的。

Amaury Hanser 在評論中提到了縮放，所以我檢查了一下，當放大到 110% 時，白色也消失了。

我什至嘗試設定overflow: hidden;on.meter和height: 150%;on fill，所以我可以在檢查器中看到填充大于容器，但它仍然顯示白色邊框：

內部和外部 div 之間的像素大小的間隙

uj5u.com熱心網友回復：

我不確定出了什么問題，但您可以改用大綱

 .meters {
            display: grid;
            grid-template-columns: 4rem 1fr 3rem;
            grid-auto-rows: 1.3rem;
            align-items: center;
            gap: 0.8rem;
          }
          .meter {
            display: flex;
            height: 100%;
            outline: 3px solid black !important;
          }
          .fill {
            background: blue;
          }

 <div class="meters">
        <p>0 Sterne</p>
        <div class="meter">
          <div class="fill" style="width: 100%;"></div>
        </div>
        <p>27%</p>
        <p>1 Sterne</p>
        <div class="meter">
          <div class="fill" style="width: 10.989%;"></div>
        </div>
        <p>11%</p>
        <p>2 Sterne</p>
        <div class="meter">
          <div class="fill" style="width: 32.4176%;"></div>
        </div>
        <p>32%</p>
        <p>3 Sterne</p>
        <div class="meter">
          <div class="fill" style="width: 11.5385%;"></div>
        </div>
        <p>12%</p>
        <p>4 Sterne</p>
        <div class="meter">
          <div class="fill" style="width: 17.5824%;"></div>
        </div>
        <p>18%</p>
      </div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/517899.html

標籤：css谷歌浏览器

上一篇：Chrome擴展背景腳本：加載時更改滑鼠游標

下一篇：有沒有辦法操縱卷軸？