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

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

При верстке форм я давно наблюдаю следующую проблемную ситуацию: независимо от версии браузера FireFox, в которой смотрится страница, вертикальное выравнивание текста в кнопке, созданной с помощью тега <input type="submit" />, отличается от всех других популярных браузеров на 1-2 пикселя (в зависимости от высоты кнопки и размера шрифта).

Для сравнения проведем элементарный тест:

  1. Создаем страницу с единственным элементом содержимого — HTML-кнопкой:

    <html>
    <body>
    	<input type="submit" value="Submit" class="submit" />
    </body>
    </html>
    
  2. Для кроссбраузерности оформляем эту кнопку с помощью 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;
    }
    
  3. Делаем скриншоты этой кнопки в браузерах: Opera, FireFox, Internet Explorer, Safari, Chrome, и для наглядности в фотошопе рисуем специальные линии (кликните на изображение для просмотра его с увеличенным масштабом):

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

Как видим, текст кнопки в FireFox’e на 1 пиксель ниже по сравнению со всеми остальными браузерами.

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

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

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

Комментарии (68)
  1. 1
    Alex Yaroshevich

    Вообще говоря, это в reset.css должно лежать:


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

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

    Правда, автор на валидность жаловался ;)

  2. 2
    gabriella
    @

    Dimox а вы сами создаете дизайн в фотошопе или только верстаете?

  3. 4
    gabriella
    @

    обязательно ли верстальщику знать javascript? или достаточно css html? многие девелоперы используют jquery, начала читать книгу дэвида флэнагана и ничегошеньки представьте себе не понимаю, буду рада за любой ответ

  4. 8
    gabriella
    @

    здесь с предполагаю для идентичности во всех браузерах можно использовать пользовательские input=»submit», input=»button» обернуть его тегом span ну и фоном, кстати Dimox может напишете статью про пользовательские элементы формы ?

  5. 10
    Alex

    input[type=’submit’]::-moz-focus-inner{padding:0;border:0}

    добавить в строках где обнуляете цсс, и можно забыть сразу о баге

  6. 12
    @

    Решил проблему использованием

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

    Как-то так.

  7. 13
    Hityara
    @

    Мне помогло только «padding-bottom: 2px;» для сабмита (именно 2 пикселя почему-то)
    Делал идентичное оформление для сабмита и ссылки.

    Все остальные методы, найденные в инете не канают.

  8. 14
    Green

    Решение Alex’а не помогло.
    Помогло такое:
    @-moz-document url-prefix() {
    .style {padding: 0 0 2px 0;}
    }

  9. 15
    Slava
    @

    У меня лечится этим

    -moz-box-sizing: content-box;

  10. 16
    Slava
    @

    Заменяю input на button и вставляю в него span, который делаю блоком, по высоте и ширине равный button’у.

    Сохранить

    button {
    height: 26px;
    }

    button span {
    display: block;
    height: 26px;
    line-height: 26px;
    }

  11. 17
    Таня

    попробуйте все выровнять относительно верха
    vertical-align: top;