IOS 5.0 Safari Nie Wyśrodkowuje pionowo elementu zastępczego w polu tekstowym

Chcę wyśrodkować w pionie tekst wprowadzony w polach tekstowych na stronie.

Typowym sposobem osiągnięcia tego jest ustawienie linii-wysokość i wysokość równe. Działa to na pre iOS 5.0 Safari.

Jednak; na iOS 5 Safari wyświetla wpisany tekst pionowo wyśrodkowany... Ale tekst zastępczy I kursor są wyrównane do góry.

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

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

Ktoś jeszcze ma do czynienia z tym problemem?
Author: Nirmal Patel, 2011-12-19
Source

5 answers

Ustawienie line-height: 1; wydaje się to naprawiać.

 36
Author: Jesse,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-04-18 18:38:29

Dla mnie jest tylko jedno rozwiązanie, które wydaje się prawie idealne we wszystkich testowanych przeglądarkach (Chrome, FF, Safari (+iOS), IE10): {]}

line-height: normal;

Rozwiązania takie jak line-height: 100% i line-height: 1; wydają się być wyrównane do góry wejścia, szczególnie w Chrome.

Http://jsfiddle.net/5Vc3z/

Porównanie:

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

 39
Author: Marcel,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-03-26 10:18:14

Powinieneś użyć procentu dla wysokości linii.

.txtBox {
       line-height: 100%;
       height: 3em;
    }
<input type="text" class="txtBox" placeholder="Name"></input>
 8
Author: andychukse,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-05-13 13:05:41

zakładając, że po prostu starasz się, aby pole wejściowe wydawało się większe, możesz użyć padding:

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

Również twoje pole wprowadzania powinno brzmieć: 

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

Edit

Przepraszam, trochę to trwało. Wygląda na to, że placeholder może być stylizowany indywidualnie i / lub dziedziczyć style od rodzica. Niestety istnieje sporo stylów, które nie są obecnie obsługiwane przez Safari. [[4]}poniższy blog zawiera szczegóły dotyczące technik stylizacji i które są / nie są obsługiwane w niektórych przeglądarkach:

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

 2
Author: My Head Hurts,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-12-19 10:28:17

Utknąłem w tym problemie przez długi czas pomimo używania

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

Okazuje się, że posiadanie line-height w elemencie wejściowym samo w sobie łamało moje input::webkit-input-placeholder line-height.

Rozwiązanie rozszerzone:

Usunąłem wysokość linii w moim stylu wprowadzania i to naprawiło mój problem.

 1
Author: Ariella,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-06-13 21:11:47