HTML5, Segnaposto, line-height in Webkit

Ho un campo di inserimento:HTML5, Segnaposto, line-height in Webkit

<input type="text" placeholder="whatever">

con gli stili:

input { 
    margin: 0; 
    padding: 0 6px; 
    font-size: 19px; 
    line-height: 19px; 
    height: 36px; 
    width: 255px; 
}

problema è la line-height non è entrata in vigore per il segnaposto in WebKit CROMO. quindi il testo nel campo di input è allineato in modo brutto. Qualcun altro ha visto questo e ora come risolverlo?

Grazie

fonte

2011-02-13 AnApprentice

Che cosa ha a che fare con segnaposto? – xzyfer

Il testo segnaposto nell'input non è allineato con la regola CSS altezza riga. – AnApprentice

Sembra che si tratti di un bug di Chrome: http://stackoverflow.com/questions/4919680/html5-placeholder-css-padding-problem – Emily

Guardando i tag, sto supponendo che si sta scrivendo qualcosa di simile ...

<input type="text" placeholder="whatever">

Purtroppo, Chrome cravatte le mani quando si tratta di styling il segnaposto, il selettore si presenta così ...

input::-webkit-input-placeholder {}

È possibile trovare le opzioni di stile, trucchi e browser supportati in Styling the HTML Placeholder

fonte

2011-02-13 05:24:28 Duopixel

Grazie per l'aiuto. comunque è unico. il segnaposto dovrebbe ereditare questi stili implicitamente. –

Io non penso di poter replicare completamente il problema, ma forse si può risolvere il problema utilizzando padding: 7px 6px;. In questo modo si spera di impostare il pad superiore e inferiore su 7px, il che equivale a un lavoro simile a line-height. Con diverse dimensioni (larghezza/dimensione del carattere) dovresti essere in grado di scegliere il riempimento appropriato calcolando il numero (height - fontsize)/2, magari dare o prendere un pixel o due per la perfezione.

fonte

2011-02-13 02:46:22 nxasdf

sembra che la rimozione della dichiarazione di line-height del tutto wor ks. Ha funzionato per me in FF7, Chrome15 e Safari 5.1. Inoltre ha un bell'aspetto in IE9 e FF3.6, ma non sembra buono in IE8.

fonte

2011-11-14 16:03:20

Questo ha funzionato per me. Ma in alcuni casi potresti non voler rimuovere l'altezza della riga per gli input, quindi potrebbe non funzionare per tutti. –

Eccellente. line-height: normale; è qualcosa a cui non ho mai fatto ricorso prima ma ha senso qui. Direi che i segnaposto ei loro standard di selezione fluttuanti sono una buona scusa per un codice imperfetto che lo risolve rimuovendo piuttosto che aggiungere :) – jerclarke

L'elemento di input funziona solo su una riga - l'altezza della riga non si applica. –

segnaposto di input non sembrano come i valori dei pixel line-height, ma questo in verticale centrarlo in ingresso:

::-webkit-input-placeholder { line-height: normal; }

fonte

2013-07-16 15:59:00

Per favore aggiungi qualche tipo di chiarimento/spiegazione – tnw

HTML5, Segnaposto, line-height in Webkit

risposta

Problemi correlati