Версия браузера за номером 3.6 научилась вертикально выравнивать содержимое текстовых полей (input type="text") строго по центру. Каюсь, заметил совсем недавно. По-видимому, на такое поведение повлиял подросший движок Gecko 1.9.2. Вот небольшой пример для наглядности:
HTML:
<form action="">
<input type="text" name="search" class="text">
</form>
CSS:
input.text {
height:28px; width:150px;
padding:0 3px; border:1px solid #808080;
font:13px Arial, sans-serif;
color:#8b0000;
}
Получается, что Firefox ниже версии 3.6 не умеет вертикально центрировать текст при указании высоты поля. Добавим сюда также IE8 со всем своим умирающим семейством (на рисунке их нет, придется принять на веру).
А как сделать кроссбраузерно? Заглянул в Google, люди рекомендуют одновременно указывать для текстового поля верхний и нижний отступ (padding-top, padding-bottom) и не использовать свойство height.
Дополнение. Все-таки люди говорят не всю правду. Посмотрел, height тоже надо указывать, чтобы избежать проблем с масштабированием в некоторых браузерах. Тогда видимая высота поля будет равна height + padding-top + padding-bottom + border-top + border-bottom.
Я использую метод, предложенный Иваном Сагалаевым: указываем высоту блока, а внутренному тексту назначаем line-height равным высоте блока. Ну и конечно блоку overflow:hidden. Правда такой метод годится только для однострочных текстов, но в инпутах других и не бывает.