当background-clip属性设置为content-box

Question

我有一个使用基础网格的网站，因此某些宽度是基于百分比的，并且内容也越来越集中在屏幕宽度上，这意味着有些东西并没有完全附着在像素网格上。到目前为止，这从来都不是问题。我要说大约一个月前，我仅在Chrome中注意到，在连接了两个基于百分比的容器的情况下，会看到非常细的线（小于一个像素）。 看到这里：

更新：

在评论中向我指出，这是由在列上设置为content-box的background-clip属性引起的。看到这个小提琴-https://jsfiddle.net/odpv8jgx/

您可以看到两个容器之间的蓝色背景。 我仍然坚持这个事实，即这不是几个星期前的问题，因此Chrome一定有所更改。那是一个错误吗？我已将其报告为在铬https://bugs.chromium.org/p/chromium/issues/detail?id=957946

上

.row{
  background-color: blue;
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.left{
  flex-basis: 33.3333%;
  background-color: orange;
  padding-left: 5px;
}

.right{
  flex-basis: 66.66666%;
  background-color: green;
  padding-right: 5px;
}

.left,
.right{
  background-clip: content-box;
  height: 500px;
}

<div class="row">
  <div class="left">
    a
  </div>
  <div class="right">
    b
  </div>
</div>

原始详细信息

现在CSS中的列上的填充，边距和边框为0。而且，如果我在IE，Edge，Firefox和Opera中检查同一页面，则此间隙永远不会出现。因此，在我看来，chrome似乎开始以与其他浏览器不同的方式处理此问题。我还注意到，如果我开始手动调整Chrome浏览器的宽度，该间隙将完全消失，从而产生一些结果，在我看来，当浏览器设法完美对齐像素网格上的两个容器时，不会产生间隙。我什至已经在垂直轴上发生了这种情况，请参阅此处

即使没有css边距/填充/边框，在容器之间的某些分辨率上也存在很小的差距，并且由于其父容器具有蓝色背景，因此背景显示在它们之间。这也仅在Chrome中发生。

有什么办法可以避免这种情况？还是这只是他们发布的一些错误代码，将来会被删除？

这里是指向页面的链接，该页面在水平轴上有间隙 https://www.idc.com/getdoc.jsp?containerId=lcEUR145039919

Answer 1

我报告的错误已被Chrome开发人员接受。它已经分配给某人进行修复。

https://bugs.chromium.org/p/chromium/issues/detail?id=957946