Выравнивание по вертикали placeholder у input в Safari и Chrome — как сделать единым?

Такие дела.
У input стили:
width: 320px;
height: 72px;
font-size: 18px;
color: white;
background: transparent;
border: 2px solid alpha(white, 50%);
padding: 23px 20px;
transition: 0.1s ease-out;


В Chrome отображается так:
9a92973adb164b048bc6acc8e487befa.png

В Safari уже криво:
b8b0207e4998450ebec794f2f550e164.png

В сафари кегль у шрифта почему-то имеет снизу отступ больше, чем сверху. При установке меньшего line-height высота остается такой же, но текст уезжает вверх с обрезанием.
Если выровнять в сафари - будет криво в хром. И наоборот.

Как выйти из положения?
  • Вопрос задан
  • 5641 просмотр
Решения вопроса 2
Serj-One
@Serj-One
i'm sexy and i know it
input{
	height: 72px;
	line-height: 72px; // вычти 4px на бордер
	padding: 0 20px;
}

Центрировать текст в инпутах нужно через line-height а не padding.
Ответ написан
Хочу заметить, что отступы рендерятся по разному.
blogs.adobe.com/webplatform/2014/08/13/one-weird-t...

Если проверить: codepen.io/STutukov/pen/egPWxv и посмотреть высоту контейнера, то
chorme: height = 42px;
firefox: height = 43px;
explorer (древний): height = 43px;
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы