FireFox и вертикальное выравнивание текста в input[submit]

67 комментариев

Либо я плохо искал, либо проблема только у меня и я чего-то не знаю (в чем сомневаюсь), но в Интернете по сабжу ничего не нашел. Поэтому данный пост – это вопрос к читателям.

При верстке форм я давно наблюдаю следующую проблемную ситуацию: независимо от версии браузера 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’e на 1 пиксель ниже по сравнению со всеми остальными браузерами.

Применение свойств vertical-align: middle или line-height, равный высоте кнопки, проблему не решают.

Так вот, господа веб-мастера, хотелось бы узнать – если вы сталкивались с подобной ситуаций, то каким образом вы устраняете эту недоделку FireFox?

Мне пока что приходится использовать для него CSS-хак, который не валиден, что, естественно, не есть хорошо.

Комментарии (67)

Alex
26 декабря 2009 г. в 14:10
Кстати есть еще следующая конструкция

element::-moz-focus-inner{padding:0;border:0}

. Убирает внутренние отступы в ff.
1. Dimox
  26 декабря 2009 г. в 15:41 / ответ на коммент Alex
  Спасибо. В следущий раз попробую воспользоваться.
  1. Sergey
    26 декабря 2009 г. в 20:27 / ответ на коммент Dimox
    Вполне подходящий прием
2. Dimox
  3 марта 2010 г. в 13:25 / ответ на коммент Alex
  Решение красивое, буду теперь использовать его. Только жаль, что не валидное. Кстати, достаточно и такого варианта:
  
  element::-moz-focus-inner {border: 0}
Андрей
30 января 2010 г. в 22:59
form .submit, x:-moz-any-link, x:default {padding: 0 0 2px 0;} Увеличеваеи или уменшаем padding-bottom для кросбраузерности
Кирилл!
15 марта 2010 г. в 14:15
господа вы мои хорошие!
Не морочьте яиченьки!
Просто поставьте проверку javascriptoм на наличиё лисички и пригрузите килобайтный файл с коррективами.
Ведь людей у которых лиса всегда включён джаваскприпт, потому что это аксиомина, если хотите ;)
1. Dimox
  15 марта 2010 г. в 14:23 / ответ на коммент Кирилл!
  Некрасивый способ.
2. Vladimir
  15 марта 2010 г. в 14:28 / ответ на коммент Кирилл!
  Далеко не всегда.
Андрей
13 апреля 2010 г. в 16:40
Я использую “глобальный сброс”
http://vremenno.net/html-css/css-global-reload/
mihdan
13 апреля 2010 г. в 22:05
И что помогает? Чушь! Если б всё так просто было, то и поста не было.
MyFreeWeb
4 мая 2010 г. в 15:53
Fx такой Fx, да. На самом деле, этот баг не критичный, ничего страшного, никто не заметит даже.

P.S. с тегом button, я так понимаю, то же самое? я особо не изучал код Firefox’а, но вроде все кнопки одинаково рисуются.
1. Dimox
  4 мая 2010 г. в 20:09 / ответ на коммент MyFreeWeb
  На самом деле, этот баг не критичный, ничего страшного, никто не заметит даже.
  
  В том-то и дело, что бросается в глаза.
  
  с тегом button, я так понимаю, то же самое?
  
  Да, с ним тоже это наблюдается.
Slaffko
18 мая 2010 г. в 21:32
Не такая уж и большая проблема, я бы никогда не заметил этого бага, а большинство пользователей и подавно
Мелочами страдаете
1. Dimox
  19 мая 2010 г. в 09:01 / ответ на коммент Slaffko
  Не было бы проблемой, если бы заказчики не указывали на нее.
  1. Slaffko
    19 мая 2010 г. в 12:17 / ответ на коммент Dimox
    Тут не поспоришь, клиент всегда прав!
Андрей
29 сентября 2010 г. в 12:30
Могу ошибаться, но мне кажется это решается

outline:none;
1. mihdan
  29 сентября 2010 г. в 13:22 / ответ на коммент Андрей
  К сожалению, но нет. Можете сами попробовать.
ArPoHoM
21 октября 2010 г. в 03:48
в FF 3.6.3 решил проблему только так

input::-moz-focus-inner { border: 0; padding: 0; }
1. mihdan
  21 октября 2010 г. в 10:17 / ответ на коммент ArPoHoM
  СМ. второй комментарий сверху от Alex.
Alex Yaroshevich
5 февраля 2011 г. в 21:15
Вообще говоря, это в reset.css должно лежать:

::-moz-focus-inner { border: 0; padding: 0; }

равно как и много чего другого.

Правда, автор на валидность жаловался ;)
gabriella
12 февраля 2011 г. в 22:20
Dimox а вы сами создаете дизайн в фотошопе или только верстаете?
1. Dimox
  13 февраля 2011 г. в 11:50 / ответ на коммент gabriella
  Только верстаю.
gabriella
13 февраля 2011 г. в 18:59
обязательно ли верстальщику знать javascript? или достаточно css html? многие девелоперы используют jquery, начала читать книгу дэвида флэнагана и ничегошеньки представьте себе не понимаю, буду рада за любой ответ
1. Slaffko
  13 февраля 2011 г. в 19:02 / ответ на коммент gabriella
  Очень желательно, почти обязательно.
  И еще знания РНР не помшают
2. Dimox
  14 февраля 2011 г. в 17:37 / ответ на коммент gabriella
  Лично мне достаточно знаний CSS и HTML, чтобы выполнять заказы. В JavaScript я практически не разбираюсь, а в jQuery разбираюсь, но использую его только для решения своих задач.
  1. Slaffko
    14 февраля 2011 г. в 17:46 / ответ на коммент Dimox
    Я тоже не особо разбираюсь в javascript, но азы знаю и с jQuery дружу. Без этих знаний нельзя сделать что-либо современное
gabriella
29 марта 2011 г. в 16:07
здесь с предполагаю для идентичности во всех браузерах можно использовать пользовательские input=”submit”, input=”button” обернуть его тегом span ну и фоном, кстати Dimox может напишете статью про пользовательские элементы формы ?
1. Dimox
  29 марта 2011 г. в 16:48 / ответ на коммент gabriella
  А что про них написать?
Alex
6 сентября 2011 г. в 15:29
input[type=’submit’]::-moz-focus-inner{padding:0;border:0}

добавить в строках где обнуляете цсс, и можно забыть сразу о баге
1. mihdan
  6 сентября 2011 г. в 16:40 / ответ на коммент Alex
  Alex уже 3 раза ответили подобным способом, Вы не читали предыдущие комменты?
Роман
11 октября 2011 г. в 06:30
Решил проблему использованием

<a href="" rel="nofollow">Отправить</a>$(document).ready(function(){$("#submit").click(function(event){event.preventDefault();$('#form_id').submit();});});

Как-то так.
Hityara
30 августа 2012 г. в 17:20
Мне помогло только “padding-bottom: 2px;” для сабмита (именно 2 пикселя почему-то)
Делал идентичное оформление для сабмита и ссылки.

Все остальные методы, найденные в инете не канают.
Green
22 декабря 2012 г. в 00:08
Решение Alex’а не помогло.
Помогло такое:
@-moz-document url-prefix() {
.style {padding: 0 0 2px 0;}
}
Slava
16 ноября 2013 г. в 20:36
У меня лечится этим

-moz-box-sizing: content-box;
Slava
24 ноября 2013 г. в 20:31
Заменяю input на button и вставляю в него span, который делаю блоком, по высоте и ширине равный button’у.

Сохранить

button {
height: 26px;
}

button span {
display: block;
height: 26px;
line-height: 26px;
}
Таня
25 декабря 2014 г. в 15:32
попробуйте все выровнять относительно верха
vertical-align: top;

FireFox и вертикальное выравнивание текста в input[submit]

Смотрите также

10 фиксов, решающих проблемы Internet Explorer 6

Верстаем кроссбраузерный "резиновый" макет страницы

Цвет курсора в поле input и кроссбраузерность

Тег &lt;hr /&gt; и кроссбраузерный отступ

Комментарии (67)

Ваш комментарий

Тег <hr /> и кроссбраузерный отступ