Sviluppo HTML
  1. Sviluppo HTML
  3. Perché Safari e Firefox tagliano la parte inferiore del testo di input?
Intereting Posts
Altezza e larghezza dello stile dell’immagine non incluse nelle mail di Outlook Bordo pixel attorno a un cerchio CSS con overflow: nascosto; Toccando il campo di inserimento del testo su iPhone viene visualizzata la tastiera, ma la digitazione non inserirà alcun testo Impostazione overflow: nascosto solo per determinati elementi Accenti stampati in modo diverso ogni volta, in PHP e HTML Più font nella proprietà Font-Family? Il modulo Jquery non mostra il messaggio di sottomissione sul server Web ma mostra il messaggio di invio sull’host locale Come posso aggiungere il valore della casella di testo inserito dall’utente per etichettare dynamicmente usando jquery? Vai all’ancora DOPO il caricamento Come posso ottenere il valore del pulsante HTML da passare come parametro al mio javascript? Posta multipla PHP MIME Come rendere il collegamento non cambia colore dopo essere stato visitato? Layout HTML: titolo e pulsante mostra tutte le righe della textarea senza scorrere Come prevenire il deep linking ai file sul mio sito web

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