Текст-заполнитель не вертикально центрирован в Safari

Ответ 1

Прекрасно работает для меня:

<input type="text" name="first_name" placeholder="Search" style="height: 50px;">

Попробуйте изменить это:

#register-block-fields input {
width: 230px;
height: 41px;
padding-left: 40px;
padding-right: 20px;
height: 41px; // Changed from line-height
color: #878787;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
background: none;
}

Ответ 2

Самый простой способ - использовать свойства CSS line-height и height. Просто введите текст a line-height с тем же значением, что и его height.

Кстати, ваш живой сайт выглядит хорошо для меня в хроме 16.

Ответ 3

Для меня лучшим решением является использование line-height: normal и hack для IE 8.

<input type="text" name="test_name" placeholder="Search">


input {
    height: 35px;
    line-height: normal;
    line-height: 32px\0/; /* for IE 8 */
}

Ответ 4

И эта ошибка тоже. Установка высоты линии в ems исправила это для меня. Он выглядит так же, как в Chrome, Safari (рабочий стол и iOS) и Firefox. и я добавил трюк \9, чтобы получить вертикальное центрирование в IE. здесь мой css

height: 36px;       
line-height: 1.2em;
line-height: 26px\9; /*for IE */

Ответ 5

-Safari Solution-

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

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

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

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

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