Firefoxのbuttonが小さくならない理由

問題はボタンの幅を2.5emにした時でした。

問題発生時の画像です。

数字がボタンからはみ出す

cssの指定は次の通り。

button.w25{
  width:2.5em;
  padding:2px;
}

paddingを0にしても、text-alignを指定しても効果がありません。

現在お使いのブラウザでどう見えるかは次です。

Firefox Quantum 60.3.0 esr(64ビット) でのお話。OSは Debian 9 (stretch) です。

Firefoxの現在のバージョンは63あたりですが、当方はディストリビューションが提供するパッケージ版を使っていますので多少古いです。ですから最新バージョンでは直っているかもしれません。

Firefox をパッケージマネージャーを使わずにインストールする方法もありますが、最近はDebianまかせです。

対策後の画像です。

background-image: none;を指定

cssの指定は次の通り。background-image: none;を追加します。

button{
  width:2.5em;
  padding:2px;
  background-image: none;
}

角が丸くならないですが、しかたありません。

現在お使いのブラウザでどう見えるかは次です。

Debianで使えるもう一つのブラウザ、midori 0.5.11 ではこのような問題はありません。

2016年に作成したページのスクリーンショットが残っていました。

2016年ごろのデザイン

これは幅を指定していませんが、内容に応じた適切な幅でした。

Firefox Quantum 60.3.0で幅を指定しないと次の図のようになります。広すぎます

幅指定なし

これを2.5emに指定すると次の図のようになります。

幅指定2.5em

なんでこんなになってしまったのでしょう。

現在お使いのブラウザでどう見えるか表にしておきます。

幅指定なし	幅2.5em	背景画像なし

background-image: none; とすればよいという情報の発見場所は、developer.mozilla.orgの、 "https://developer.mozilla.org/ja/docs/Web/HTML/Element/button"の「ボタン要素」でした。

Android版についてですが、次のように書いてありました。

[引用] Android 版 Firefox のバージョン35より前では、すべてのボタンに既定でグラデーションの background-image を設定していました（バグ 763671 をご覧ください）。これは background-image: none を使用して無効化できます。