Eingabepolster Ausschneiden von Text in Firefox

Question

In Firefox, wenn ich ein Bootstrap Form-Control-Eingabeelement verwenden, wenn ich das Eingabeelement pad es schneidet den Text durch Auffüllen nach innen statt rund um den Text. Es scheint nur diesen Effekt in Firefox zu haben. Diese jsfiddle demonstriert das Problem:

http://jsfiddle.net/v76xB/

Formulareingabe html:

<input id="name" type="text" class="form-control join-form" placeholder="Enter a Username"> 

CSS:

.join-form { 
    padding: 24px; /*comment this out to see effect of padding */ 
    margin: 12px 0px; 
    font-size: 16px; 
    letter-spacing: 0px; 
    font-weight: 300; 
} 

Das ist etwa so spezifisch wie ich diesen Fehler zu replizieren, erhalten kann. Ich hoffe auch, dass es nur eine Browser-Laune ist, die komplett mit mir zusammenhängt, aber ich kann nicht überprüfen, ob ich individuell arbeite und nur eine Maschine habe.

Answer 1

Die Bootstrap formSteuerungsKlasse erhält eine feste Höhe voreingestellt. Fügen Sie einfach ein height: auto; zu Ihrem .join-form Selektor (Flexibilität zu halten) und die Polsterung ändern, um die ursprüngliche Wirkung, wie diese padding: 14px 20px;

Siehe hier zu bekommen: http://jsfiddle.net/x78Bh/

Answer 2

Fügen Sie die height -Eigenschaft hinzu und wenden Sie die Füllung wie unten an. Jetzt können Sie sehen, dass Firefox und Chrom sich gleich verhalten.

.join-form { 
padding: 20px; /*comment this out to see effect of padding */ 
margin: 12px 0px; 
font-size: 16px; 
letter-spacing: 0px; 
font-weight: 300; 
height:60px; 
} 

DEMO