Perché Safari e Firefox tagliano la parte inferiore del testo di input?

Quello che voglio

Cromo inserisci la descrizione dell'immagine qui Su Chrome, il testo di input sembra normale.

Che cosa sta succedendo

Firefox inserisci la descrizione dell'immagine qui

Safari inserisci la descrizione dell'immagine qui

Come puoi vedere, il testo di input è leggermente troncato in basso su Firefox e taglia in gran parte su Safari. Come posso ripararlo?

Se qualcuno potesse aiutare w / questo sarebbe molto apprezzato!

Codice

HTML

 

CSS

 /*Add borders when hover or click on input boxes*/ input[type="text"] { outline: none; box-shadow:none !important; border: 1px solid white; /*make the borders invisble by turning same color as background*/ } input[type="text"]:hover, input[type="text"]:focus{ border: 1px solid #cccccc; border-radius: 8px; } /*Style input text boxes*/ input[type='text'][name='Worksheet-Name']{ font-size: 36px; margin-top: 20px; margin-left: 15px; } input[type='text'][name='Worksheet-Problem']{ font-size: 20px; } /*Change placeholder*/ input[type='text'][name='Worksheet-Name']::-webkit-input-placeholder { /* Chrome/Opera/Safari */ font-weight: 500; font-size: 36px; } input[type='text'][name='Worksheet-Name']::-moz-placeholder { /* Firefox 19+ */ font-weight: 500; font-size: 36px; } input[type='text'][name='Worksheet-Name']:-ms-input-placeholder { /* IE 10+ */ font-weight: 500; font-size: 36px; } input[type='text'][name='Worksheet-Name']:-moz-placeholder { /* Firefox 18- */ font-weight: 500; font-size: 36px; } /*Change placeholder*/ input[type='text'][name='Worksheet-Problem']::-webkit-input-placeholder { /* Chrome/Opera/Safari */ font-weight: 400; font-size: 20px; } input[type='text'][name='Worksheet-Problem']::-moz-placeholder { /* Firefox 19+ */ font-weight: 400; font-size: 20px; } input[type='text'][name='Worksheet-Problem']:-ms-input-placeholder { /* IE 10+ */ font-weight: 400; font-size: 20px; } input[type='text'][name='Worksheet-Problem']:-moz-placeholder { /* Firefox 18- */ font-weight: 400; font-size: 20px; } 

JSFiddle

È ansible ridurre il riempimento inferiore e / o la dimensione del carattere e questo risolverà il problema dell’overflow.

 input[type='text'][name='Worksheet-Name']{ font-size: 35px;//instead of 36 margin-top: 20px; margin-left: 15px; } 

o

 .input-lg { height: 46px; padding: 10px 16px 0;//change here to have 0 font-size: 18px; line-height: 1.33333; border-radius: 6px; } 

anche possibilmente ha risposto qui con altezza della linea: perché Firefox sta tagliando il testo nel mio ?

La causa è posizionare l’altezza della linea sul segnaposto, se lo rimuovi non verrà più tagliato