Несовместимая высота элементов ввода текста между Firefox и WebKit

Question

Хорошо, я понимаю, что это что-то вечное, но здесь говорится:

У меня один ввод текста,

<input type="text" name="whatever" />

и я указал его font-family, font-size и padding. Тем не менее, даже на той же машине (скажем, на моем Mac) высота ввода в Firefox (3.6) отличается от высоты в Chrome или Safari. В частности, Firefox добавляет немного больше отступов под текстом.

И нет, указание height в пикселях также не обеспечивает согласованности.

Есть ли способ достичь согласованности высоты ввода текста в браузерах на основе Gecko и WebKit (не говоря уже о IE и Opera), не прибегая к JavaScript? И если я должен использовать JavaScript, кто-то уже разработал плагин jQuery или что-то, чтобы легко это сделать?

Обновление: Вот что не нужно делать. Плагин jqTransform позволяет обрабатывать элементы формы и обещает, что они будут выглядеть одинаково во всех браузерах. Вот как выглядит демонстрационный ввод в Chrome 5 на моем Mac:

и вот как выглядит тот же ввод в Firefox 3.6.4:

Я никоим образом не изменил эти скриншоты, просто обрезал их. Теперь моя первая реакция: «Тьфу, я не хочу поддерживать Firefox». Но в настоящее время пользователей Firefox больше, чем пользователей Safari и Chrome вместе взятых, так что это не вариант.

Кто-то, пожалуйста, помогите! Я просто хочу, чтобы мои формы выглядели одинаково в современных, совместимых со стандартами браузерах! И под «выглядеть так же» я не говорю о outline при выборе или чем-то подобном; Я просто говорю о одинаковой ширине, высоте и расположении текста!

Answer 1

ОК, вот «решение», которое я разработал, если вы действительно хотите, чтобы элементы <input type="text"> выглядели одинаково в текущих версиях Safari, Chrome и Firefox. Обратите внимание, что я не проверял это ни в Opera, ни в IE, ни в операционных системах, отличных от Mac OS; Я уверен, что понадобятся дополнительные хаки.

Я просто определяю <div>, чтобы обеспечить фон для ввода, и даю самому вводу свойства background: none, border: 0 и т. Д. Другими словами, ввод является просто плавающим текстом. Затем я позиционирую вход по фону, используя относительное позиционирование (в частности, устанавливая вход top). Это дает мне возможность настроить его для разных браузеров. В частности, я обнаружил, что в браузерах на основе Webkit входной текст был на 1 пиксель выше, чем в Firefox, поэтому я добавил строку

if ($.browser.webkit) { $input.css('marginTop', 1); }

Теперь ввод наконец выглядит одинаково между Webkit и Firefox. Да, это взлом, но это работает.

Answer 2

Помогает ли вам этот другой вопрос: Firefox 3.6 и отличие CSS от предыдущих версий Firefox 3.5 и более ранних версий? ?

Таким образом, вы видите разницу между fx 3.6 и Fx3.5-?

Answer 3

if ($ .browser.webkit) {$ (". JqTransformInputInner div input"). Css ("padding-top", "10px");}