顶部div上方的不需要的填充 - 仅在Firefox中

Question

我正在使用this模板。当将功能合并到我正在构建的仪表板中时，一切正常，除了在缩小字体大小时我在标签上方有一些不需要的空白空间。我创建了一个最小的工作示例：

HTML：

<div class="tab">
  <input type="radio" id="tab-1" name="tab-group-1" checked>
  <label for="tab-1">Tab One</label>
</div>

<div class="tab">
  <input type="radio" id="tab-2" name="tab-group-1">
  <label for="tab-2">Tab Two</label>
</div>

CSS：

* {
  padding: 0;
  margin: 0;
}

body {
  background: #003399;
}

.tab {
  float: left;
}

.tab label {
  background: #eee;
  position: relative;
  font-size: 16px;
}

.tab [type=radio] {
  display: none;
}

https://jsfiddle.net/tqejgae0/

使用Firefox时，请查看标签上方的额外蓝色空间？它在Chromium，Chrome，Opera和Safari中看起来如预期。

Stackoverflow上有很多类似的问题，其中大多数都是用

解决的

* {
  padding: 0;
  margin: 0;
}

这个，也没有任何其他解决方案对我有用。

网页设计当然不是我的背景，所以我很感谢你的帮助！

编辑：

以下是截图：

Answer 1

将display：block添加到.tab标签选择器为我解决了问题。

.tab label {
  background: #eee;
  position: relative;
  font-size: 16px;
  display: block;
}

https://jsfiddle.net/tqejgae0/2/

屏幕截图：