Firefox 在父项中偏移按钮 div

Question

我有以下简化的 HTML/CSS，它在 Firefox v36 中呈现不同（与 IE v11 或 Chrome v41 相比）。

button {
  border: 0;
  padding: 0;
}
.pushbutton {
  background-color: red;
  position: relative;
  left: 20px;
  top: 20px;
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
}
.pushbutton button {
  width: 80px;
  height: 20px;
}
.pushbutton button span {
  position: absolute;
  left: 0px;
  top: 0px;
  font-size: 8pt;
}

<div class="pushbutton">
  <button type="button">
    <span>TopLeft</span>
  </button>
</div>

<div class="pushbutton">
  <button type="button">
    <span>TopLeft</span>
  </button>
</div>

在 Firefox v36 中，结果如下：

我已经试验过了，发现添加以下任一方法都可以解决问题：

.pushbutton button {
    display: block;
}

或：

.pushbutton button {
    position: absolute;
}

不过，我想了解为什么会发生这种情况，以及处理这种情况的最佳方式是什么，它可以跨浏览器（包括旧浏览器！）

Answer 1

button {vertical-align: top;} 应该可以解决您的问题。按钮是 inline-block 元素，vertical-align 属性的初始值是 baseline，这会导致红色框中出现间隙。

Firefox 在父项中偏移按钮 div

Firefox offsets button within parent div

html

css

firefox