火狐浏览器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}

以下是相关的it技术翻译内容：

标记如下：<button><span>test</span></button>

JSFIDDLE

- David Hellsing

---

可能是 https://dev59.com/7HHYa4cB1Zd3GeqPHx9a 的重复问题。 - Vikas Ghodke

可能，但不完全确定。这只是同一个错误的基本示例，希望有人能找到更通用的解决方法来解决这个问题... - David Hellsing

Answer 1

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

button {
    position: relative;
    ...
}

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

在这里试一下

- RichieHindle

Answer 2

看起来是Gecko的一个bug；我已经提交了https://bugzilla.mozilla.org/show_bug.cgi?id=913759

- Boris Zbarsky