Вертикальное выравнивание текста в полях формы

Опубликовано: 27 мая, 2010 | Рубрика: Кодинг | Тэги: Firexox, vertical-align, вёрстка, советы новичкам | Нет комментариев »

Краткая заметка, которая, возможно, поможет сохранить время и нервы начинающим верстальщикам. Речь пойдёт о стилизации инпутов (input), тоесть полях формы. Казалось бы, чего тут сложного? Основные параметры, а именно ширина и высота задаются стандартно — width и height. Посмотрим в браузерах как это выглядит. На первый взгляд всё отлично, однако начинаем заполнять поле, и видим, что в Internet Explorer текст прилипает к верхней границе поля.

В остальных современных браузерах текст сам центрируется по вертикали. Как мы центрируем текст по вертикали у строчных элементов? Правильно, дополнительно указав высоту строки и напрямую задав выравнивание с помощью vertical-align. На этот раз даже IE понял, чего мы хотим. Казалось бы, тему можно закрыть. Однако, есть одно большое НО.

Если у пользователя установлен Mozilla Firefox более ранней версии, чем 3.6, то наши трюки с высотой строки и прямым указанием выравнивания будут проигнорированы. Удивительно, но факт, в ранних версиях Firefox пользователь увидит текст прилипший к верхней границе input. Вот такой тупизм.

У верстальщика два пути решения этой проблемы. Первый — забыть и забить. Можно сказать, что пользователи Firefox более продвинутые юзеры и обновляют этот браузер значительно чаше, чем пользователи того же IE. Однако, могу по личному опыту сказать, что это не совсем так. Я до сих пор встречаю пользователей, у которых установлена вторая(!) версия Firefox.

Второй способ — задать высоту для input не через height, а с помощью внутренних отступов padding.

Какой из способов выбрать — решать вам. Как говорил великий Морфеус: “Я лишь могу указать дверь, войти в неё ты должен сам”

---