Làm thế nào để ngăn chặn chuyển động văn bản nút khi nút đang hoạt động trong Firefox?

Question

mẫu:

<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

Trình duyệt: Mozilla Firefox (phiên bản mới nhất)

Khi nút được nhấp (đang hoạt động), nút văn bản di chuyển ngay. Làm thế nào để ngăn chặn nó?

Answer 1

http://jsfiddle.net/reg8f6eo/ là một trong các giải pháp: thêm padding:0 cho button:active

Hoặc bạn có thể thêm span (hoặc có thể tag khác mà bạn thích) vào button bạn như thế này http://jsfiddle.net/reg8f6eo/1/

Answer 2

Add reset css

*{margin:0; padding:0;} 

Demo

Answer 3

Nếu văn bản được chuyển ngay - nút di chuyển sang trái, vì vậy văn bản sẽ vẫn ở vị trí của mình:

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

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