Firefox: вложенный div не выравнивается должным образом

Question

У меня есть кнопка, которая отлично смотрится в любом браузере, кроме FF:

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

Суть в том, что у меня есть фон кнопки и div, так что кнопка может быть масштабирована до любой ширины.В Firefox, div на 1px ниже, чем кнопка, и я не уверен почему.

Демонстрация: http://jsfiddle.net/cwolves/FgHV4/4/

Упрощенный код:

<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

Чтобы он соответствовал (например) Chrome, вам нужно:

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

См .: http://jsfiddle.net/FgHV4/5/

На несвязанной заметке div не является действительным дочерним элементом из button (в HTML5). Вы должны изменить его на span.