Firefox BUTTON phần tử con không kéo dài

Question

Tôi gặp sự cố trong Firefox (phiên bản mới nhất). Tôi cần đặt một phần tử con bên trong phần tử BUTTON trải dài trên toàn bộ nút. Nhưng tôi có được điều này: JSFIDDLE

Chrome hiển thị nó (một cách chính xác, tôi nghĩ):

Đây là 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} 

Và đánh dấu: <button><span>test</span></button>

JSFIDDLE

Answer 1

Bạn có thể sử dụng định vị tuyệt đối để làm cho span lấp đầy button:

button { 
    position: relative; 
    ... 
} 

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

Fiddle here.

Answer 2

Trông giống như một lỗi trong Gecko với tôi; Tôi đã nộp https://bugzilla.mozilla.org/show_bug.cgi?id=913759