segnaposto di input problema line-height

Question

Qual è il problema?

C'è una casella di immissione con altezza 36 pixel come mostrato nell'immagine sopra. In IE10 il segnaposto non è al centro verticale.

Answer 1

Per tutti gli ingressi solo dare

line-height:normal; 

ci vorrà normale line-height e funziona bene in tutti i browser.

Answer 2

tenta di utilizzare questa:

vertical-align:middle; 

Answer 3

Soluzione 1:
ingressi uso senza segnaposto:

<input type="text" class="generalInput" value="Topic" onBlur="javascript:if(this.value==''){this.value=this.defaultValue; strechInput(this.id , 'c');}" onFocus="javascript:if(this.value==this.defaultValue){this.value=''; strechInput(this.id , 's');}">

Soluzione 2:

uso questo script per aggiungere css separato per ogni browser

var browsers = ['Firefox' , 'Safari'];//and so on 
    var browser = 'unknown'; 
    for(var i = 0 ; i < browsers.length ; i++) 
    { 
     if(window.navigator.userAgent.indexOf(browsers[i]) != -1) 
      browser = browsers[i]; 
    } 
    var head = document.getElementsByTagName("head"); 
    var css = document.createElement("link"); 
    css.setAttribute('href' , './' + browser.toLowerCase() + '.css'); 
    css.setAttribute('rel' , 'stylesheet'); 
    (head[0]).appendChild(css); 

Soluzione 3:
uso commenti HTML

<!--[if IE]> 
    <link rel="stylesheet" href="./ie.css"> 
<![ENDIF]--> 

Answer 4

È possibile utilizzare waterwark js per risolvere questo problema.

http://jsfiddle.net/maxim75/yJuF3/

Partenza violino.

<input type="text" id="Text1" /> 

Answer 5

per chi viene a questo fine - ho trovato una soluzione che ha funzionato a Twitter Bootstrap (3.1), così come un paio di altri test mi sono imbattuto.

semplicemente aggiungere l'elemento di input:

height: inherit; 
vertical-align: middle; 

Answer 6

Io di solito impostare un altezza e line-height al input [type = text] ed ereditare queste proprietà per :: segnaposto.

height: inherit; 
line-height: inherit; 

Answer 7

Soluzione:

Applicato stessa 36px linea-altezza input [type = "text"].

Effetto collaterale:

Prima di dare line-height: 36px stava funzionando benissimo in tutti i browser.Come ho applicato 36px line-height di input [type = "text"], di seguito è quello che è successo in Safari:

seconda soluzione:

Applicare line-height con IE mod . Questo è il seguente

input[type="text"] { 
    line-height: 36px\9; // CSS Hack only for IE. 
}