Element wprowadzania (przesyłania) zajmuje dodatkową przestrzeń w przeglądarce Firefox

Question

Strona internetowa z łączem, danymi wejściowymi (prześlij) i span. Wszystkie są zaprojektowane tak, aby miały taki sam wygląd, w rzeczywistości dane wejściowe są stylizowane tak, aby miały taki sam wygląd jak hiperłącze i zakres.

Testowane przy użyciu: Firefox 3.0, 3.6, 4.0, 14.0.1

Z jakiegoś powodu, wejście jest nieco większy wśród innych. Ponadto tekst wejścia nie jest wyrównany z tekstem łącza i zakresu. Oto demonstracja na żywo.

http://jsfiddle.net/LGftW/

Oto mój CSS:

a{ 
    text-decoration:none; 
} 

input[type="submit"]{ 
    border:0 none; 
    background:transparent; 
} 

a, input[type="submit"], span{ 
    border:solid 1px green; 
    font-size:64px; 
    font-family:Arial; 
    font-weight:bold; 
    float:left; 
    padding:0; 
    margin:0; 
} 

Markup:

<a href="#">LINK</a> 
<input type="submit" value="INPUT" /> 
<span>SPAN</span> 

Więc jak mogę zrobić wejście wyglądać jak zwykła linka lub rozciągać? Czy to dziwne zachowanie przeglądarki lub po prostu brakowało mi jakiegoś CSS? Rozwiązuję to od jednego dnia.

Edit

Wydaje się, że problem występuje tylko w Firefoksie. IE8-9 i Chrome wyświetlają go poprawnie.

Answer 1

przycisk Usuń wyściółka w Firefoksie za pomocą input::-moz-focus-inner w CSS:

input::-moz-focus-inner /*Remove button padding in FF*/ 
{ 
    border: 0; 
    padding: 0; 
} 

edycja: Updated Demo Związek z powyższego kodu.

SEE DEMO Firefox