FireFox и вертикальное выравнивание текста в input[submit]
Либо я плохо искал, либо проблема только у меня и я чего-то не знаю (в чем сомневаюсь), но в Интернете по сабжу ничего не нашел. Поэтому данный пост – это вопрос к читателям.
При верстке форм я давно наблюдаю следующую проблемную ситуацию: независимо от версии браузера FireFox, в которой смотрится страница, вертикальное выравнивание текста в кнопке, созданной с помощью тега <input type="submit" />, отличается от всех других популярных браузеров на 1-2 пикселя (в зависимости от высоты кнопки и размера шрифта).
Для сравнения проведем элементарный тест:
Создаем страницу с единственным элементом содержимого – HTML-кнопкой:
<html> <body> <input type="submit" value="Submit" class="submit" /> </body> </html>Для кроссбраузерности оформляем эту кнопку с помощью CSS следующим образом:
input.submit { width: 80px; height: 25px; border: 1px solid #BBB; border-top-color: #DDD; border-left-color: #DDD; background: #EEE; font: 12px Arial, Tahoma, sans-serif; }Делаем скриншоты этой кнопки в браузерах: Opera, FireFox, Internet Explorer, Safari, Chrome, и для наглядности в фотошопе рисуем специальные линии (кликните на изображение для просмотра его с увеличенным масштабом):
![FireFox и вертикальное выравнивание текста в input[submit]](https://dimox.name/wp-content/uploads/2009/11/input-submit-screenshot.png "FireFox и вертикальное выравнивание текста в input[submit]")
![FireFox и вертикальное выравнивание текста в input[submit]](https://dimox.name/wp-content/uploads/2009/11/input-submit-screenshot-zoom.png "FireFox и вертикальное выравнивание текста в input[submit]")
Как видим, текст кнопки в FireFox’e на 1 пиксель ниже по сравнению со всеми остальными браузерами.
Применение свойств vertical-align: middle или line-height, равный высоте кнопки, проблему не решают.
Так вот, господа веб-мастера, хотелось бы узнать – если вы сталкивались с подобной ситуаций, то каким образом вы устраняете эту недоделку FireFox?
Мне пока что приходится использовать для него CSS-хак, который не валиден, что, естественно, не есть хорошо.
Комментарии (67)
Вообще говоря, это в reset.css должно лежать:
::-moz-focus-inner { border: 0; padding: 0; }
равно как и много чего другого.
Правда, автор на валидность жаловался ;)
Dimox а вы сами создаете дизайн в фотошопе или только верстаете?
Только верстаю.
обязательно ли верстальщику знать javascript? или достаточно css html? многие девелоперы используют jquery, начала читать книгу дэвида флэнагана и ничегошеньки представьте себе не понимаю, буду рада за любой ответ
Очень желательно, почти обязательно.
И еще знания РНР не помшают
Лично мне достаточно знаний CSS и HTML, чтобы выполнять заказы. В JavaScript я практически не разбираюсь, а в jQuery разбираюсь, но использую его только для решения своих задач.
Я тоже не особо разбираюсь в javascript, но азы знаю и с jQuery дружу. Без этих знаний нельзя сделать что-либо современное
здесь с предполагаю для идентичности во всех браузерах можно использовать пользовательские input=”submit”, input=”button” обернуть его тегом span ну и фоном, кстати Dimox может напишете статью про пользовательские элементы формы ?
А что про них написать?
input[type=’submit’]::-moz-focus-inner{padding:0;border:0}
добавить в строках где обнуляете цсс, и можно забыть сразу о баге
Alex уже 3 раза ответили подобным способом, Вы не читали предыдущие комменты?
Решил проблему использованием
<a href="" rel="nofollow">Отправить</a>$(document).ready(function(){$("#submit").click(function(event){event.preventDefault();$('#form_id').submit();});});Как-то так.
Мне помогло только “padding-bottom: 2px;” для сабмита (именно 2 пикселя почему-то)
Делал идентичное оформление для сабмита и ссылки.
Все остальные методы, найденные в инете не канают.
Решение Alex’а не помогло.
Помогло такое:
@-moz-document url-prefix() {
.style {padding: 0 0 2px 0;}
}
У меня лечится этим
-moz-box-sizing: content-box;
Заменяю input на button и вставляю в него span, который делаю блоком, по высоте и ширине равный button’у.
Сохранить
button {
height: 26px;
}
button span {
display: block;
height: 26px;
line-height: 26px;
}
попробуйте все выровнять относительно верха
vertical-align: top;