У меня есть поле ввода:
<input type="text" placeholder="whatever">
со стилями:
input {
margin: 0;
padding: 0 6px;
font-size: 19px;
line-height: 19px;
height: 36px;
width: 255px;
}
Проблема заключается в том, что высота строки не вступает в силу для placeholder в webkit CHROME. поэтому текст в поле ввода выравнивается уродливым способом. Кто-нибудь еще видел это и теперь, как его исправить?
Спасибо
Глядя на ваши теги, я предполагаю, что вы пишете что-то вроде...
<input type="text" placeholder="whatever">
К сожалению, Chrome связывает ваши руки, когда дело доходит до стилизации заполнитель, селектор выглядит так:
input::-webkit-input-placeholder {}
Вы можете найти варианты стиля, gotchas и поддерживаемые браузеры в Стилирование места размещения HTML
Заполнители полей ввода, похоже, не любят значения высоты строки пикселя, но это будет вертикально центрировать его на входе:
::-webkit-input-placeholder { line-height: normal; }
Похоже, что удаление вашего объявления высоты строки полностью работает. Он работал у меня в FF7, Chrome15 и Safari 5.1. Также хорошо выглядел в IE9 и FF3.6, но не выглядит хорошо в IE8.
Я не думаю, что могу полностью воспроизвести вашу проблему, но, возможно, вы можете исправить ее, используя padding: 7px 6px;.
Для этого нужно надеяться, что верхнее и нижнее дополнение будет равно 7px, что в значительной степени выполняет аналогичную работу line-height. С разными размерами (ширина/размер шрифта) вы должны иметь возможность выбрать подходящее дополнение, вычислив (height - fontsize) / 2, возможно, дать или взять пиксель или два для совершенства.