css - Firefox BUTTON 子元素不拉伸

Question

我在 Firefox（最新版本）中遇到问题。我需要在一个横跨整个按钮的 BUTTON 元素中放置一个子元素。但我明白了：JSFIDDLE

Chrome 显示它（我认为是正确的）：

这是CSS：

button{height:100px;background:orange;padding:0;border:none;}
button span{display:block;height:100%;background:red}
button::-moz-focus-inner {padding:0;margin:0}

和标记：<button><span>test</span></button>

JSFIDDLE

Answer 1

在我看来，这就像 Gecko 中的一个错误；我提交了https://bugzilla.mozilla.org/show_bug.cgi?id=913759

Answer 2

您可以使用绝对定位来span填充button：

button {
    position: relative;
    ...
}

button span {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    ...
}

在这里拉小提琴。