html - 为什么在 Chrome 而不是 Firefox 中的这些 block 元素之间有细线间隙/边框

Question

当我向容器添加背景颜色，然后在其中堆叠 block 元素时，Chrome 中的元素之间会出现细线间隙。 Firefox 中不存在这样的差距。

为什么？如果没有额外的包装元素，如何避免这种情况？

在这个JS Bin中更容易看到:https://razor-x.jsbin.com/teqevoc/6/edit?html,css,output

.main {
  background-color: black;
}

.item {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100px;
  background-color: white;
}

<div class="main">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

Answer 1

如果我们假设您只使用了 CSS 和 HTML，那么它应该在所有浏览器中都能正常工作。也许这是您安装的 chrome 扩展程序，它向您的 HTML 添加了一些像素或元素。尝试禁用所有 chrome 扩展程序(如果有)并刷新。