由于像素舍入误差，每个 <div> 与 flexbox 之间的像素宽间隙答案

【问题标题】：Pixel wide gaps between each <div> with flexbox due to pixel rounding error由于像素舍入误差，每个 <div> 与 flexbox 之间的像素宽间隙
【发布时间】：2016-03-27 00:59:17
【问题描述】：

如何去除似乎是由像素舍入错误引起的黑线？这似乎只是 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>

【问题讨论】：

我怀疑是否存在——这取决于每个浏览器如何选择呈现子像素值/维度。请记住，您的代码将要求 flexbox 在每个子项之间均匀地重新分配剩余空间，这意味着您很可能会得到计算出的子项宽度的小数值。
您可以尝试填补 .. 的空白吗？ ...与box-shadow:0 1px lightgreen .My chrome(w7) 并没有搞砸。你玩过缩放吗？
只是为了让您知道：在 MacOS 上的 Chrome 47 中没有线条 - 只是一个全绿色区域
您是否尝试过margin: 0;，或删除任何 div 之间的空格（即没有换行符）？
@Johannes 我想我解决了这个问题。我启用了系统范围的 DPI 缩放（适用于高分辨率显示器）。当我禁用它（并再次登录）时，chrome 会完美呈现它。所以这看起来完全是 Chrome 的错。我想对此无能为力，所以我将其标记为已解决？

标签： css google-chrome flexbox

【解决方案1】：

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

【讨论】：

【解决方案2】：

你可以尝试用 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>

【讨论】：

这是一个很好的问题答案，但没有回答“如何修复 Chrome 造成的差距？”的问题。我也遇到了同样的问题，但是我没有使用纯色背景，而是使用了颜色非常不同的图像，但我仍然不知道该怎么办。
@enriquo 您应该使用显示您的问题的 sn-p 发布您自己的问题。有一些奇怪的错误，修复可能出乎意料。这里 box-shadow 适用于边框或普通背景，这是一个快速的'n容易修复;）