¿Por qué Safari y Firefox cortan la parte inferior del texto de entrada?

Lo que quiero

Cromo enter image description here En Chrome, el texto de entrada parece normal.

Que esta pasando

Firefox enter image description here

Safari enter image description here

Como puede ver, el texto de entrada está siendo cortado ligeramente en la parte inferior de Firefox y, en su mayoría, está cortado en Safari. ¿Cómo puedo arreglar eso?

¡Si alguien pudiera ayudar con esto, sería muy apreciado!

Código

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

Puede reducir el relleno inferior y / o el tamaño de fuente y eso solucionará su problema de desbordamiento.

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

también posiblemente se responda aquí con altura de línea: ¿Por qué Firefox corta el texto en mi ?

La causa es colocar la altura de la línea en el marcador de posición, si la quita, ya no se cortará