为什么Chrome中的这些块元素之间存在细线间隙/边界，而不是Firefox

Question

当我向容器添加背景颜色然后将块元素堆叠在内部时，Chrome中的元素之间可以看到发纹间隙。 Firefox中没有这样的差距。

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

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

＆＃13;

＆＃13;

.main {
  background-color: black;
}

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

Answer 2

这种情况经常发生在webkit中。假设没有其他元素可以通过添加

来解决问题

setTypeface()

通常在firefox等浏览器上并不明显，并在webkit / chrome上修复它。