由于像素舍入误差,每个<div>与flexbox之间的像素间隙较大

Question

如何删除看似由像素的舍入分数中的错误引起的黑线？这似乎只是Chrome的问题,Firefox似乎正在进行更智能的舍入并完美呈现.

这个问题有一个简单的解决方案吗？

这就是Chrome呈现的方式:

  .container {
    height: 100px;
    width: 100%;
    background-color: black;
    display: flex;
    flex-flow: nowrap column;
  }
  .row {
    background-color: lightgreen;
    flex: 1 1 auto;
  }

<div class="container">
  <div class="row"></div>
  <div class="row"></div>
  <div class="row"></div>
  <div class="row"></div>
  <div class="row"></div>
  <div class="row"></div>
  <div class="row"></div>
</div>

Answer 1

你可以尝试使用box-shadow填充间隙(？)

.container {
    height: 100px;
    width: 100%;
    background-color: black;
    display: flex;
    flex-flow: nowrap column;
  }
  .row {
    background-color: lightgreen;
    flex: 1 1 auto;
    box-shadow:0 1px lightgreen;
  }

<div class="container">
  <div class="row"></div>
  <div class="row"></div>
  <div class="row"></div>
  <div class="row"></div>
  <div class="row"></div>
  <div class="row"></div>
  <div class="row"></div>
</div>

Answer 2

我想我已经弄清楚了这个问题。我启用了系统范围的 DPI 缩放（对于高分辨率显示器）。当我禁用它（并再次登录）时，chrome 完美地呈现它（在所有缩放级别）。所以这看起来完全是 Chrome 的错。我想对此无能为力，所以我想我会将其标记为已解决。谢谢你们的帮助。