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

Question

我是一位相对较新的网络开发人员，我正在开设一个在线网页。

我遇到的问题是，在div topcontainer（黄色背景的那个）之后，Firefox上有一个白色的间距。在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>

Answer 2

从.topcontainer

移除身高

即它应该看起来像

.topcontainer {
    background-color: gold;
}