Question

I have a button that looks fine in every browser except FF:

<button><div>Button Text</div></button>

The gist is that I have a background on the button & div so that the button can be scaled to any width. In Firefox, the div is 1px lower than the button, and I’m not sure why.

Demo: http://jsfiddle.net/cwolves/FgHV4/4/

Simplified code:

<button><div>foo</div></button>

<style>
button {
    border      : 0px;
    background  : #CCC;
    height      : 29px;
    line-height : 29px;
    padding     : 0px;
}

div {
    background  : #AAA;
    height      : 29px;
    line-height : 29px;
    position    : relative;
    left        : 7px;
}
</style>

Answer 1

To make it match (for example) Chrome, you need this:

button::-moz-focus-inner { 
    border: 0;
    padding: 0;
}

See: http://jsfiddle.net/FgHV4/5/

On an unrelated note div is not a valid child of button (in HTML5). You should change it to a span.