Line-height в input’ах

Это перевод статьи, которая размещена здесь.

Как-то на днях я попытался добиться одинаковой высоты input’ов в разных браузерах. Я предположил, что смогу воспользоваться для этой цели высотой строки (свойством line-height), но не тут-то было. Между тем это действительно работает в браузерах на движке Webkit, а вот в Firefox не работает.

Чтобы посмотреть, почему Firefox по-своему воспринимается свойство line-height для контролов форм, воспользуемся свойством !important:

input {
    /* Other statements removed for brevity */
    line-height: normal !important;
}

Чтобы посмотреть, какие Firefox использует стили по умолчанию, необходимо вбить в строку адреса следующее: resource://gre-resources/. Там вы увидите несколько css-файлов, среди которых form.css отвечает за стили элемента input.

Проблема заключается в !important, которое не дает возможности изменить это правило своими стилями, даже если вы будете сами использовать !important. Эта проблема обсуждалась долгое время, но с тех пор ничего не изменилось.

Более того, Firefox не единственный браузер, который не позволяет вам изменять высоту строки у input. Эта проблема касается также и браузера Opera. Таким образом использование line-height исключено.

Ближайший обходной путь, который я нашел — это явно задавать высоту строки браузерам, приблизительно равную значению normal. Я говорю приблизительно, потому что line-height: normal очень различается в разных браузерах. Меня устроило значение 1.2.

После этого я задал элементу input высоту в 1.2em, что соответствовало высоте строки этого элемента. В завершение ко всему, что, конечно, меня опечалило, мне пришлось явно задать внутренние отступы и бордеры, чтобы привести поля ввода к одинаковому отображению во всех браузерах. При этом у input исчезли дефолтные тени и отступы. Но вы можете поэкспериментировать с тенями, используя свойство box-shadow.

В итоге результирующий css-код получился следующим:

input[type="text"] {
    height:1.2em;
    padding:2px;
    border:1px solid #ddd;
    font:1em/1.2 "Helvetica neue", Arial, sans-serif;
}

Остаются небольшие различия в отрисовке текста, но по крайней мере input теперь выглядит одинаково во всех браузерах. Вы знаете лучший способ преодолеть эту проблему? Тогда пишите мне через форму обратной связи или в твиттер.

От себя лично выражаю благодарность автору оригинального поста. В свое время много маялся с этой проблемой. Надеюсь, всем остальным этот материал будет также полезен ;)

4 months ago  /  3 notes  /