Непоследовательная высота элементов ввода текста между Firefox и WebKit
Хорошо, я понимаю, что это - что-то вроде вечного вопроса, но здесь идет:
У меня есть единственный ввод текста,
и я указал font-family, font-size и padding. Все же, даже на той же машине (мой Mac, скажем), вход имеет другую высоту в Firefox (3.6), чем это делает в Chrome или Safari. А именно, Firefox добавляет немного больше дополнения ниже текста.
И не, определение height в пикселях не достигает непротиворечивости также.
Там какой-либо путь состоит в том, чтобы достигнуть непротиворечивости высоты ввода текста через Геккона - и основанные на WebKit браузеры (уже не говоря о IE и Opera), не обращаясь к JavaScript? И если я должен использовать JavaScript, кто-то уже создал плагин jQuery или что-то, чтобы легко сделать это?
Обновление: вот, что не сделать. jqTransform плагин позволяет Вам элементы формы кожи и обещает, что они будут выглядеть одинаково через браузеры. Вот то, как демонстрация вводила взгляды в Chrome 5 на моем Mac:
и вот то, как тот же вход смотрит в Firefox 3.6.4:
Я не изменил эти снимки экрана всегда, просто обрезал их. Теперь, моя первая реакция, "Тьфу, я не хочу поддерживать Firefox". Но в настоящее время существует больше пользователей Firefox, чем Safari и объединенных пользователей Chrome, таким образом, это не опция.
Кто-то, помогите! Я просто хочу, чтобы мои формы выглядели одинаково через современные, совместимые стандартами браузеры! И "выглядят одинаково", я не говорю о outline на выборе или чем-либо как этот; я просто говорю о наличии той же ширины, высоты и текстового размещения!
2 ответа
Хорошо, вот "решение", которое я разработал, если вы действительно хотите, чтобы элементы выглядели одинаково в текущих версиях Safari, Chrome и Firefox. Обратите внимание, что я не тестировал это в Opera или IE, или на операционных системах, отличных от Mac OS; я уверен, что потребуются дополнительные хаки.
Я просто определяю Теперь текст ввода выглядит одинаково в Webkit и Firefox. Да, это хак, но он работает. background: none, border: 0 и т.д. Другими словами, ввод - это просто плавающий текст. Затем я позиционирую ввод поверх фона, используя относительное позиционирование (в частности, устанавливая top). Это дает мне возможность настроить его для разных браузеров. В частности, я обнаружил, что текст ввода на 1px выше в браузерах на базе Webkit, чем в Firefox, поэтому я добавил строку
if ($.browser.webkit) { $input.css('marginTop', 1); }
Помогает ли вам этот другой вопрос: Firefox 3.6 и CSS отличаются от предыдущих версий Firefox 3.5 и более ранних версий? ?
Итак, видите ли вы какие-нибудь разница между fx 3.6 и Fx3.5-?