Неправильно работает флексбокс с тегом button в ff, как решить?

Question

[Danila]

есть довольна большая кнопка, флексбокс использую для выравнивания элементов кнопки
Проблема: используя тег<a> для кнопки всё работает как нужно, но при смене тега на <button> в firefox элементы кнопки очень странно разъезжаются
в других браузерах всё хорошо.

пример на codepen


желтая - <button>, синяя - <a>

с чем связано и как решить? знаю можно заменить на inline-block, но хотелось бы узнать причину бага

Answer 1

[Николай]

https://bugzilla.mozilla.org/show_bug.cgi?id=984869
Мозила в очередной раз умнее всех.
P.S. в конце концов они переоткрыли тикет и возможно всё таки пофиксят эту "фичу".
Как workaround можете использовать <input type="button"/>