IOS 5.0 Safari не вертикально центрирует заполнитель в текстовом поле

Я хочу вертикально центрировать текст, введенный во входные текстовые поля на странице.

Типичный способ достижения этого - установить высоту линии и высоту. Это работает на pre iOS 5.0 Safari.

Тем не менее; на iOS 5, Safari отображает напечатанный текст по вертикали по центру... Но текст заполнителя и курсор отображаются в верхней строке.

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

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

Кто-нибудь еще сталкивается с этой проблемой?

Ответ 1

Настройка line-height: 1; кажется исправлена.

Ответ 2

Для меня есть только одно решение, которое кажется близким к совершенству во всех проверенных мной браузерах (Chrome, FF, Safari (+ iOS), IE10):

line-height: normal;

Решения, такие как line-height: 100% и line-height: 1;, похоже, выровнены по направлению к началу ввода, особенно в Chrome.

http://jsfiddle.net/5Vc3z/

Сравнение:

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

Ответ 3

Вы должны использовать процент для высоты линии.

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

Ответ 4

~~Предполагая, что вы просто пытаетесь сделать поле ввода более крупным, вы можете использовать padding:~~

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

Кроме того, поле ввода должно быть:

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

Изменить

Извините, немного пораньше. Похоже, что placeholder можно стилизовать индивидуально и/или наследовать стили от родителя. К сожалению, в настоящее время Safari довольно много стилей, которые не поддерживаются Safari.

В следующем блоге есть сведения о методах стилизации и которые/не поддерживаются в определенных браузерах:

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

Ответ 5

Я застрял в этой проблеме в течение долгого времени, несмотря на использование

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

Оказывается, что высота строки во входном элементе сама по себе нарушала мой входной: webkit-input-placeholder line-height.

Расширенное решение:

Я удалил высоту строки в моем стиле ввода и исправил мою проблему.