Loại bỏ khoảng cách / khoảng đệm nút bổ sung trong Firefox

Xem ví dụ về mã này: http://jsfiddle.net/Z2BMK/

Chrome / IE8 trông như thế này

Firefox trông như thế này

CSS của tôi là

button {
    padding:0;
    background:#080;
    color:white;
    border:solid 2px;
    border-color: #0c0 #030 #030 #0c0;
    margin:0;
}

Làm cách nào để thay đổi mẫu mã để làm cho nút giống nhau trong cả hai trình duyệt? Tôi không muốn sử dụng các siêu liên kết dựa trên JavaScript vì chúng không hoạt động với phím cách trên bàn phím và nó phải có hrefURL, đây không phải là một cách rõ ràng để xử lý mọi thứ.

Giải pháp của tôi, kể từ Firefox 13

button::-moz-focus-inner { margin: -1px; padding: 0; border-width: 1px; }

Thêm điều này:

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

http://jsfiddle.net/thirtydot/Z2BMK/1/

Việc bao gồm borderquy tắc trên là cần thiết để các nút trông giống nhau trong cả hai trình duyệt, nhưng nó cũng loại bỏ đường viền chấm khi nút đó activeở trong Firefox. Rất nhiều nhà phát triển loại bỏ đường viền chấm chấm này, tùy ý thay thế nó bằng một thứ gì đó thân thiện hơn với thị giác.

Để sửa chữa nó trên các yếu tố đầu vào cũng như thêm

input[type="reset"]::-moz-focus-inner, 
input[type="button"]::-moz-focus-inner, 
input[type="submit"]::-moz-focus-inner, 
input[type="file"] > input[type="button"]::-moz-focus-inner

là đơn giản hoàn hảo!