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

Question

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

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

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

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

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

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

Answer 1

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

line-height: normal;

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

http://jsfiddle.net/5Vc3z/

Сравнение:

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

Answer 2

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

Answer 3

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

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

Answer 4

Если вы просто пытаетесь сделать поле ввода больше, чем вы можете использовать padding:

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

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

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

Редактировать

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

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

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

Answer 5

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

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

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

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

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