css – Firefox BUTTON子元素不伸展

我在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

解决方法

您可以使用绝对定位使跨度填充按钮：

button {
    position: relative;
    ...
}

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

Fiddle here.