HTML5, Placeholder, высота строки в Webkit

Question

У меня есть поле ввода:

<input type="text" placeholder="whatever">

со стилями:

input {
    margin: 0;
    padding: 0 6px;
    font-size: 19px;
    line-height: 19px;
    height: 36px;
    width: 255px;
}

Проблема в том, что высота строки не действует для заполнителя в веб-наборе CHROME. поэтому текст в поле ввода выровнен ужасным образом. Кто-нибудь еще видел это и теперь, как это исправить?

Спасибо

Answer 1

Входные заполнители, кажется, не любят значения высоты строки пикселя, но это будет вертикально центрировать их во входных данных:

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

Answer 2

Глядя на ваши теги, я предполагаю, что вы пишете что-то вроде ...

<input type="text" placeholder="whatever">

К сожалению, Chrome связывает вам руки, когда дело доходит до стиля заполнителя, селектор выглядит так ...

input::-webkit-input-placeholder {}

Вы можете найти параметры стилей, ошибки и поддерживаемые браузеры в Стилизация HTML-заполнителя

Answer 3

Похоже, что удаление вашего описания высоты строки полностью работает.У меня это работает в FF7, Chrome15 и Safari 5.1.Также хорошо выглядел в IE9 и FF3.6, но НЕ выглядел хорошо в IE8.

Answer 4

Не думаю, что смогу полностью воспроизвести вашу проблему, но, возможно, вы можете исправить ее, используя padding: 7px 6px;. Делая это, мы надеемся установить верхний и нижний отступы в 7px, что в значительной степени аналогично line-height. С разными размерами (ширина / размер шрифта) вы сможете выбрать подходящий отступ, рассчитав (height - fontsize) / 2, возможно, дайте или возьмите один или два пикселя для совершенства.