В кои то веки решил сделать для проекта "правильную" кнопку, которая ведет себя "правильно" не только с мышкой, но и с клавиатурой.
Нормальных вариантов реализации, очевидно, 2 - на ссылках и, собственно, сама кнопка (очевидней, конечно, второй вариант, но он не лишен недостатков, поэтому упомянул именно о двух). Да, кстати, рассматривается использование в "нормальных" браузерах, исключается применение ИЕ6-7 и Оперы.

Ссылки (c атрибутом tabindex):

то есть просто кнопка, кнопка с наведением, кнопка с фокусом (или наведение с фокусом) и активная кнопка.

Очевиные минусы:
- необходимость использования, собственно, ссылки (со всеми "прелестями" - наличие href, невозможность делать дефолтный сабмит, небольшая погрешность центрирования по вертикали в разных браузерах - в пределах пиксела, но вылазит);
- обработка нажатия только через Enter, пробел не работает (без дополнительных скриптов);
- клавишное нажатие никак не отмечается (Enter срабатывает по keydown, а не keypress);
- при наличии в форме кнопки submit и наведенном фокусе на нашу кнопку при нажатии на Enter форма не отправляется.


Кнопки (скрины из Хрома):

тоже простая кнопка, кнопка с фокусом, кнопка с наведением мыши и активная кнопка. Привожу скрины двух кнопок, чтобы показать, что разницы между <button>Button</button> и <input type="button" value="Button"/> нет (правда, ее нет для Хрома и ФФ - на пиксель ниже, а в ИЕ9 <button> по центру, а <input> на пиксель ниже).

Надо использовать такую реализацию, но есть одно "но", относящееся к Хрому:
- если на кнопке фокус, то клик по ней (состояние :active) визуально приводит кнопку в состояние :hover, в остальных нормально;
- при клике на кнопку (или нажатию на пробел) кнопка теряет фокус, чего не наблюдалось с ссылкой.
Такое поведение в Хроме мне крайне удивительно и непонятно - почему уходит фокус? Понятно, в Сафари такая же ерунда.

Для объективности прилагаю стиль кнопки:




Ну, и заодно - как простым и доступным способом "поднять" на пиксель надпись (отцентрировать по вертикали) в ФФ и то же по отношению к <input type="button"> в ИЕ9.

Тоже, первая кнопка - <input type="button">, вторая - <button>. Как видно, ФФ еще и удлинил кнопки.

Допускаю, что решение простое и просто прошло мимо незамеченным. Спасибо.

Занимался другого рода кнопками (для соцсетей) и снова столкнулся с различиями в отображении. Решил. Надо руководствоваться правилами:

1. Использовать всегда <input type="button"> и <input type="submit">. Так уходим от различий для ИЕ.
2. Не знал, что ФФ при отображении всегда оставляет место для фокусной рамки, даже если принудительно стоит outline:none или outline:0. Использование стиля


полностью решает данную проблему.
3. При использовании фокуса всегда использовать не только :active, но и :focus:active, иначе ФФ использует приоритетный :focus.

Большое спасибо за оказанную помощь.

Упаси боже! Если бы я тратил "долгие дни", то не спрашивал бы тут. Попробовал - не получилось, решил спросить, чтобы не терять время. Правда, ответа не получил. А вчера снова вернулся к вопросу. А так как в процессе формирования вопроса у меня появилась конкретика задавания этого самого вопроса, то гугл мне помог значительно сильнее: введение запроса "css button firefox надпись нижу" в первых же ссылках дало решение, о чем я тут и поделился.

В большинстве своем не занимаюсь "вдосконаленістю", но когда кнопка 22 пикселя в высоту, то сдвиг вниз очень уж бросается и раздражает. Тем более, что я привык, что решаю любой вопрос. Кстати, именно для того, чтобы не задумываться о различиях в разных браузерах, я взял KendoUI - в принципе, немало скрипта, но результат налицо - шустро и одинаково (только ИЕ8 без "завитков", но это непринципиально).

Antonariyесли этот пиксель не является дефектом
Вот для чего я и взял внешний фреймворк ... Только добавил свои стили и подложку:

До пикселя не сходится - в пределах одного-двух, но на общую картинку это не влияет, так как все плавающее. Да и ИЕ8 не так чтобы сильно выпадал и функциональность не страдает.

Я пошел натоптанной дорогой - отказался от 6 и 7.