css - Firefox v60 中按钮的奇怪样式

Question

在 Firefox 中，该<button>元素应用了一个我不太理解的默认浏览器样式。检查员说它有一个 17px 的左右边框。

这是检查时的外观：

以及在过滤以显示浏览器样式时：

有趣的是它说的是border-right-width 17px，但折叠规则button > 2px会从浏览器默认样式中显示出来forms.css:611。样式表的那一行清楚地指出边框应该是 2px：

/* Non text-related properties for buttons: these ones are shared with
input[type="color"] */
button,
input[type="color"],
input[type="reset"],
input[type="button"],
input[type="submit"] {
  -moz-appearance: button;
  /* The sum of border and padding on block-start and block-end
     must be the same here, for text inputs, and for <select>.
     Note -moz-focus-inner padding does not affect button size. */
  padding-block-start: 0px;
  padding-inline-end: 8px;
  padding-block-end: 0px;
  padding-inline-start: 8px;
  border: 2px outset ThreeDLightShadow;
  background-color: ButtonFace;
  cursor: default;
  box-sizing: border-box;
  -moz-user-select: none;
  -moz-binding: none;
}

那么这里发生了什么？我错过了一些明显的东西吗？

同样，这是 Debian 上的 Firefox v60.0.2。

标签： cssfirefox