html - 网页 - firefox 中的奇怪间距，在 chrome 中正确呈现

Question

我是一名相对较新的 Web 开发人员，我正在开发在线页面。

我遇到的问题是在 Firefox 上 div topcontainer(黄色背景的那个)之后有一个白色间距。在 chrome 上它按预期呈现。

有人可以指出正确的方向或告诉我是什么原因造成的吗？ 任何有关跨浏览器开发的额外帮助/提示也将不胜感激。

.topcontainer {
  height: 100px;
  background: gold;
}
.row:before, .row:after {
  content: " ";
  display: table;
}
.column {
  width: 100%;
  float: left;
  height: 150px;
}
.orbit-container {
  overflow: hidden;
  width: 100%;
  background: red;
}

<div class="topcontainer">
  <div class="container1">
    <div class="row">
      <div class="column">Foo</div>
    </div>
  </div>
</div>
<div class="orbit-container">Bar</div>

Answer 1

添加这个:

.topcontainer {
    overflow: hidden;
}

.topcontainer {
  overflow: hidden;
  height: 100px;
  background: gold;
}
.row:before, .row:after {
  content: " ";
  display: table;
}
.column {
  width: 100%;
  float: left;
  height: 150px;
}
.orbit-container {
  overflow: hidden;
  width: 100%;
  background: red;
}

<div class="topcontainer">
  <div class="container1">
    <div class="row">
      <div class="column">Foo</div>
    </div>
  </div>
</div>
<div class="orbit-container">Bar</div>