html - 为什么按钮内有多余的水平填充(仅限 Firefox)？

Question

代码片段(JSFiddle):

* {
    outline: none;
}

button {
    background: firebrick;
    width: 200px;
    height: 40px;

    margin: 0px;
    padding: 0px;
    border: none;
}

button > div {
    background: lightskyblue;
    margin: 0px;
    padding: 0px;
    border: none;
}

<div style="padding: 60px;">
  <button>
    <div>label</div>
  </button>
</div>

在 Chrome 下，button > div 的左右边缘与包含 button 的边缘齐平；结果，button 的背景被分成两个不连续的区域，在 button > div 元素的上方和下方:

然而，在 Firefox 下，情况并非如此。 button > div 看起来完全被 button 的背景包围，就像 button 的左右填充(和/或 button > div 左右边距)已将 bee 设置为某个值 > 0。

谁能告诉我

what other CSS setting can account for this extraneous padding/margin under Firefox?

(注意:“其他 CSS 设置”是指未在示例的 CSS 中明确设置的设置。)

参见工作示例 here .

Answer 1

添加这个样式来修复它:

button::-moz-focus-inner {
    padding: 0;
    border: 0;
}

代码片段(JSFiddle):

* {
    outline: none;
}

button {
    background: firebrick;
    width: 200px;
    height: 40px;

    margin: 0px;
    padding: 0px;
    border: none;
}

button > div {
    background: lightskyblue;
    margin: 0px;
    padding: 0px;
    border: none;
}

button::-moz-focus-inner {
    padding: 0;
    border: 0;
}

<div style="padding: 60px;">
    <button>
        <div>label</div>
    </button>
</div>