Eingang Platzhalter line-height Ausgabe

Question

Was ist das Problem?

Es gibt ein Eingabefeld mit der Höhe 36px wie in obigem Bild gezeigt. In IE10 Platzhalter ist nicht vertikal in der Mitte.

Answer 1

Für alle Eingänge geben nur

line-height:normal; 

es normal line-height statt und wird in allen Browsern funktionieren.

Answer 2

Versuchen Sie, diese zu nutzen:

vertical-align:middle; 

Answer 3

Lösung 1:
Verwendung Eingänge ohne Platzhalter:

<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');}">

Lösung 2:

Verwendung dieses Skript hinzufügen separate CSS für jeden 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); 

Lösung 3:
Verwendung HTML-Kommentare

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

Answer 4

Sie js dieses Problem zu beheben verwenden waterwark können.

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

prüfen Geige heraus.

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

Answer 5

Für jedermann zu diesem späten kommt - fand ich eine Lösung, die in Twitter Bootstrap (3.1) sowie ein paar anderen Tests arbeitete ich lief.

einfach auf das Eingangselement hinzufügen:

height: inherit; 
vertical-align: middle; 

Answer 6

Ich habe in der Regel eine Höhe und line-height zum input [type = text] und erben diese Eigenschaften :: Platzhalter.

height: inherit; 
line-height: inherit; 

Answer 7

Lösung:

Angewandte gleich 36px line-height auf input [type = "text"].

Nebeneffekt:

Vor line-height geben: 36px es funktioniert in alle Browser in Ordnung.Wie ich 36px line-height auf Eingang [type = "text"], ist unter dem, was in Safari passiert:

Zweite Lösung:

Nehmen line-height mit IE-Hack . Das ist wie folgt

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