Firefox在父div中偏移按钮

Question

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

＆＃13;

＆＃13;

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;
}

＆＃13;

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

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

＆＃13;

＆＃13;

＆＃13;

在Firefox v36中，结果如下：

我已经对它进行了实验，发现添加以下任一项都可以解决问题：

.pushbutton button {
    display: block;
}

或：

.pushbutton button {
    position: absolute;
}

但我想了解为什么会发生这种情况以及处理这种兼容浏览器的最佳方式（包括旧浏览器！）

Answer 1

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