css - Why child overflows parent's left padding in FF when parent is button? -

css - Why child overflows parent's left padding in FF when parent is button? -

when button's children overflows button itself, right, in ff the left. how can prevent such behaviour? ff bug?

sample html:

<button class="test"><span class="child"></span><span class="child"></span></button>

sample css:

.test { box-sizing: border-box; width: 40px; height: 40px; border: none; background: red; white-space: nowrap; padding: 10px; text-align: left; } .child { display: inline-block; width: 20px; height: 20px; border: 1px solid green; background: blue; }

example: http://cssdeck.com/labs/m6vnniol

css firefox