Jak zapobiec ruchowi tekstu przycisku, gdy przycisk jest aktywny w przeglądarce Firefox?

Question

Próbka:

<button>Button</button> 


button { 
    border: medium none; 
    margin-top: 17px; 
    width: 224px; 
    height: 40px; 
    background: none repeat scroll 0% 0% #7BA6BB; 
    color: #FFF; 
    outline: medium none; 
    cursor: pointer; 
} 

http://codepen.io/anon/pen/ByaLZN

Przeglądarka: Mozilla Firefox (najnowsza wersja)

Po kliknięciu przycisku (aktywne), przycisk tekst przesuwa się w prawo. Jak temu zapobiec?

Answer 1

http://jsfiddle.net/reg8f6eo/ jako jedno z rozwiązań: dodaj padding:0 dla button:active

Albo można dodać span (albo inny znacznik, który chcesz) do swojej button jak ten http://jsfiddle.net/reg8f6eo/1/

Answer 2

dodawania resetowania css

*{margin:0; padding:0;} 

Demo

Answer 3

Jeśli tekst przesuwa się w prawo - przycisk w lewo, więc tekst pozostanie na swoim stanowisku:

http://jsfiddle.net/goc68jy4/2/

button { 
    ... 
    padding:0px; 
} 
button:active{ 
    margin-left:-2px; 
    padding-left:4px; 
}