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

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

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

  1. А если для Firefox’a завести свой отдельный .css и прописать в нём padding-top: -1px; ?

  2. По ряду причин без хаков не получится.

    Во-первых, FireFox жестко задает lin-height: normal !important для всех кнопок (это в resource://gre/res/forms.css)

    Во-вторых, вертикальное выравнивание будет задавать только позицию самой кнопки относительно инлайнового текста вокруг нее.

    Есть такое решение: http://stackoverflow.com/questions/1679952/input-typesubmit-text-vertical-alignment-in-firefox
    Но оно конфликтует с IE8. Так что без хаков здесь никак.

    Либо использовать input type=»image» с alt-текстом, если это приемлемо.

    • Чаще встречается именно такой вариант, как на скриншоте.

      Я не понимаю, неужели никто из веб-разработчиков не писал баг-репорт по этому поводу? Ведь это со 2-й версии FF (если еще не раньше) тянется.

  3. А если попробовать указывать необходимый padding для кнопки сверху и снизу? (правда придется отказаться от указания высоты — с одновременным указанием высоты и отступов все браузеры начинают чудить)

    • Для ФФ все равно придется другой паддинг писать, все из-за того же пикселя. Пробовал я разные варианты, самым оптимальным пока остается указание высоты + паддинг для FF через хак.

  4. Для всех блоковых элементов я использую такую доморощенную конструкцию —

    #button { border:solid 1px #bbb; background:#888; padding:5px 10px 5px 10px; margin:10px 0px 10px 0px;}
    #button:hover { border:solid 1px #bbb; background: #fff; padding:5px 10px 5px 10px; margin:10px 0px 10px 0px;}

    Проблем с кроссбраузерностью не возникало, но кнопки смотрятся несколько не по-кнопочному.

  5. Добавляю padding-bottom: Xpx

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

    А если так:

    html:not([xmlns*=""]) #id:not([id="ID"]) input[type="submit"] {}

    или

    html:not([xmlns*=""]) .class:not([class="CLASS"]) input[type="submit"] {}

    (предполагая, что у формы задан класс или ID)

  7. Да, Дима, это проблема FF достала :)
    Писал об этом у себя: «В стремлении к идеалу…»
    Но без хака для FF, решения так и не нашел :(

    • Меня удивляет, почему никто не пишет об этом баге в Мозиллу, либо пишут, но она ничего не предпринимает.

      P.S. Кстати, Сергей, нужно было оповестить подписчиков твоего блога, что у тебя сменился адрес RSS. Я вот только недавно узнал, когда задумался о том, что ты давно ничего не писал, а оказалось, что писал. А мужики-то не знают.

      • Потому что в дефолтной кнопке без линейки это баг не заметен и не критичен. Я сверстал не меньше сотни макетов пока не узнал об этом дефекте и потом еще. Это совсем не критично, что в прочем не отменяет того факта, что исправить девелоперам FF не помешало бы.

  8. Меня удивляет, почему никто не пишет об этом баге в Мозиллу, либо пишут, но она ничего не предпринимает.

    Да, видимо писать безполезно :(
    Сколько багов у OPERA, о чем тоже писал не однократно, а воз и ныне там :)

    Кстати, Сергей, нужно было оповестить подписчиков твоего блога, что у тебя сменился адрес RSS.

    Есть такое :)
    Но на хосте нет PHP5 и RSS лента вроде, как не работает :(

    • Сколько багов у OPERA, о чем тоже писал не однократно, а воз и ныне там :)

      Ну если ты только на блоге писал, то это вряд ли что-то изменит. Или ты писал в соответствующие инстанции?

      Но на хосте нет PHP5 и RSS лента вроде, как не работает :(

      Действительно, а я и не заметил.

  9. Ну если ты только на блоге писал…

    Знаю многих, кто пишет разработчикам, но ни разу никто не ответил и мер не принял :(
    Стоит, только соответствующие форумы почитать :)

  10. Столкнулся с данной проблемой пару лет назад. Написа вначале на форум мозиловский — там ткнули в решение с хаком (неважно каким, важен факт), затем три раза баг-репорт писал, даже ответа не дождался. Обидно. А проблема ведь действительно есть.

  11. В общем не знаю, может быть я тут капитан очевидность и поскольку других вариантов нету, то все используют тот же метод что и я но я использую дополнительный элемент с текстом (к примеру спан) и кладу его поверх кнопки. :-[

  12. Кстати есть еще следующая конструкция

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

    . Убирает внутренние отступы в ff.

  13. form .submit, x:-moz-any-link, x:default {padding: 0 0 2px 0;} Увеличеваеи или уменшаем padding-bottom для кросбраузерности

  14. господа вы мои хорошие!
    Не морочьте яиченьки!
    Просто поставьте проверку javascriptoм на наличиё лисички и пригрузите килобайтный файл с коррективами.
    Ведь людей у которых лиса всегда включён джаваскприпт, потому что это аксиомина, если хотите ;)

  15. Я использую «глобальный сброс»
    http://vremenno.net/html-css/css-global-reload/

  16. И что помогает? Чушь! Если б всё так просто было, то и поста не было.

  17. Fx такой Fx, да. На самом деле, этот баг не критичный, ничего страшного, никто не заметит даже.

    P.S. с тегом button, я так понимаю, то же самое? я особо не изучал код Firefox’а, но вроде все кнопки одинаково рисуются.

    • На самом деле, этот баг не критичный, ничего страшного, никто не заметит даже.

      В том-то и дело, что бросается в глаза.

      с тегом button, я так понимаю, то же самое?

      Да, с ним тоже это наблюдается.

  18. Не такая уж и большая проблема, я бы никогда не заметил этого бага, а большинство пользователей и подавно
    Мелочами страдаете

  19. Андрей
    9 лет назад

    Могу ошибаться, но мне кажется это решается

    outline:none;

  20. в FF 3.6.3 решил проблему только так

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