Html CSS在带有边框的随机第n个元素上加倍像素

目前，我尝试重新创建一个类似于格纹块的图案。 当我在浏览器中查看时，每n个元素的像素数增加一倍：

对我来说，这个问题似乎是在我创建的元素上随机出现的。 有没有人遇到过类似的问题并知道如何解决

我用以下方法创建了此文件：

// css code

.node{
  display: inline-block;
  padding: 10px;
  content: "";
  border : 1px solid #afc3c2;
  margin-right: -1px;
}

<!-- html code -->
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>

//css代码
.节点{
显示：内联块；
填充：10px；
内容：“；
边框：1px实心#afc3c2；
右边距：-1px；
}

在Microsoft Edge和Safari中，这个问题似乎都不存在。你能告诉我们你用的是什么浏览器吗

---

（在MacOS Big Sur 11.2.2上工作）

你说得对，Microsoft Edge和Safari都很好。我只在Chrome中面对这个问题。谢谢你的提示！