web-dev-qa-db-de.com

bei iOS 5.0 Safari wird der Platzhalter nicht vertikal im Textfeld zentriert

Ich möchte den in den Eingabetextfeldern auf der Seite eingegebenen Text vertikal zentrieren. 

Ein typischer Weg, dies zu erreichen, besteht darin, die Höhe und Höhe der Linie gleich zu setzen. Dies funktioniert vor Safari unter iOS 5.0. 

Jedoch; Unter iOS 5 zeigt Safari den getippten Text vertikal zentriert an. Der Platzhaltertext und der Cursor werden jedoch nach oben ausgerichtet angezeigt.

.txtBox {
    line-height: 3em;
    height: 3em;
}

<input type="text" class="txtBox" placeholder="Name"></input>

Noch jemand mit diesem Problem konfrontiert?

26
Nirmal Patel

Die Einstellung von line-height: 1; scheint das zu beheben.

36
Jesse

Für mich gibt es nur eine Lösung, die in allen getesteten Browsern nahezu perfekt erscheint (Chrome, FF, Safari (+ iOS), IE10):

line-height: normal;

Lösungen wie line-height: 100% und line-height: 1; scheinen an der Spitze der Eingabe ausgerichtet zu sein, insbesondere in Chrome.

http://jsfiddle.net/5Vc3z/

Vergleich:

http://jsfiddle.net/5Vc3z/1/

28
Marcel

Sie sollten Prozent für die Zeilenhöhe verwenden.

.txtBox {
       line-height: 100%;
       height: 3em;
    }
<input type="text" class="txtBox" placeholder="Name"></input>
8
andychukse

Angenommen, Sie versuchen nur, das Eingabefeld größer erscheinen zu lassen, als Sie padding verwenden könnten:

.txtBox {
    font-size: 1em;
    padding: 1em auto;
}

</ s> Außerdem sollte Ihr Eingabefeld Folgendes sein:

<input type="text" class="txtBox" placeholder="Name" />

Bearbeiten

Entschuldigung, hat etwas gedauert. Es scheint, dass placeholder individuell gestaltet werden kann und/oder Stile vom übergeordneten Element erben kann. Leider gibt es eine Reihe von Styles, die von Safari derzeit nicht unterstützt werden.

Das folgende Blog enthält Details zu den Stilen des Stylings und die von bestimmten Browsern nicht unterstützt werden/werden:

http://blog.ajcw.com/2011/02/styling-the-html5-placeholder/

2
My Head Hurts

Ich habe mich trotz der Verwendung lange Zeit mit diesem Thema beschäftigt 

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

Es stellt sich heraus, dass eine Zeilenhöhe im Eingabeelement selbst die Zeilenhöhe von input :: webkit-input-placeholder gebrochen hat. 

Lösung erweitert:

Ich habe die Zeilenhöhe in meinem Eingabestil entfernt und das Problem behoben.

0
Ariella