あまりinputボタンにline-heightを指定するということがないので知らなかったのですが、「The Firefox Input Button Line-Height Bug」という記事によると「FirefoxではinputボタンにCSSで line-height を指定しても無効になる」のだそうです。(Operaでも同様)

やってみると確かに何も変化がありませんでした。

記事によると原因はFirefoxのデフォルトのCSSにおいて、以下のように !important で line-height が指定されているためだそうです。

button, input[type="reset"], input[type="button"], input[type="submit"] {
    line-height:normal !important;
}

そのため、同様の効果を得るために結局 padding を使用したと書かれています。それでも全ブラウザでボタンの高さを厳密に揃えることは容易ではないようです。

• 
• ツイートで共有

著者について

F.Ko-Ji

Webエンジニアやってます。最近は ドットインストール の開発がお仕事です。その傍ら、個人で Meity や 電車遅延なう、梅酒.in、 #グラドル自画撮り部 の部室といったネットサービスを開発・運営してます。梅酒と草野球とリアル脱出ゲームが好きです。

» 詳しいプロフィールや運営サービスの一覧など