Wykładzina wejściowa wycinanie tekstu w firefox

Question

W firefox, gdy używam elementu wejściowego formantu ładowania początkowego, jeśli podbiję element wejściowy, wycina on tekst poprzez dopełnianie do wewnątrz, a nie dookoła tekstu. Wydaje się, że tylko ten efekt ma firefox. Ten jsfiddle demonstruje problem:

http://jsfiddle.net/v76xB/

formularza HTML wejściowe:

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

To jest tak specyficzny jak mogę powtórzyć tego błędu. Mam też nadzieję, że to tylko dziwactwo związane z przeglądarką, ale nie mogę sprawdzić tego, ponieważ pracuję indywidualnie i mam tylko jedną maszynę.

Answer 1

Klasa forma sterowania Bootstrap dostaje stałą wysokość domyślnie. Wystarczy dodać height: auto; do selektora .join-form (aby zachować elastyczność) i zmienić wyściółkę, aby uzyskać oryginalny efekt, jak to padding: 14px 20px;

Zobacz tutaj: http://jsfiddle.net/x78Bh/

Answer 2

Dodaj właściwość height, a następnie zastosuj wypełnienie, jak poniżej. Teraz możesz zobaczyć zarówno firefox, jak i chrome zachowują się tak samo.

.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