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

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

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

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


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

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

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

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

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

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

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

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

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

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

    Как-то так.

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

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

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

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

    -moz-box-sizing: content-box;

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

    Сохранить

    button {
    height: 26px;
    }

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

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