padding di input che taglia il testo in firefox

Question

In firefox quando uso un elemento di input di controllo del form di bootstrap, se applico l'elemento di input ritaglia il testo inserendolo verso l'interno piuttosto che attorno al testo. Sembra solo avere questo effetto in Firefox. Questo jsfiddle illustrato il problema: ingresso

http://jsfiddle.net/v76xB/

modulo 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; 
} 

Questo è quanto di specifica come posso ottenere di replicare questo errore. Sto anche sperando che sia solo una stranezza del browser che mi riguarda completamente, ma non riesco a controllare come sto lavorando individualmente e ho solo una macchina.

Answer 1

La classe modulo di controllo Bootstrap ottiene un'altezza fissa per default. Basta aggiungere un height: auto; al .join-form selettore (per mantenere la flessibilità), e cambiare l'imbottitura per ottenere l'effetto originale, come questo padding: 14px 20px;

Vedi qui: http://jsfiddle.net/x78Bh/

Answer 2

Aggiungere la proprietà dell'altezza quindi applicare il riempimento come di seguito. Ora puoi vedere sia firefox che chrome si comportano allo stesso modo.

.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