CSSにおいてFirefoxで文字の表示位置がずれる

###前提・実現したいこと
HTMLで簡単なボタンを作ったのですが、Chromeだとボタンの文字が真ん中に表示されるのですが、Firefoxだとボタンの文字が若干ずれてしまいます。ブラウザごとに差異があるのは分かっているのですが、このずれを何とかしたいです。方法ご存知の方回答お願いします。

###ソースコード

HTML
1<!DOCTYPE html>
2<html>
3    <head>
4        <meta charset="utf-8">
5        <title>レイアウト</title>
6    </head>
7    <body>
8        <style>
9            .btn{
10                width: 40px;
11                height: 500px;
12                font-size: 28px;
13            }
14        </style>
15        <input type="button" class="btn" value="愛">
16        <input type="button" class="btn" value="藍">
17    </body>
18</html>

###試したこと
参考サイトを見て
・line-height: 1にしたり
・paddingを調整したり
したのですが、ずれは消えませんでした。

###補足情報
上がChromeでの表示で下がFirefoxでの表示です。

Windows10ではpadding: 0で文字が中央に寄ってくれました。
FreeBSD11.2ではpadding: 0でも中央に寄ってくれませんでした。

m.ts10806

2019/08/20 08:20 編集

Chromeでも真ん中にはきてませんね。（提示された画像も真ん中にはなってません）

ohyama

2019/08/20 08:24

言われてからよく見たら確かに微妙にChromeも中央になってませんね。でもFirefoxの方が明らかにずれてるので、それを何とかしたいです。

行動規範の内容に同意します

回答1件

ベストアンサー

buttonがもともと持っているpaddingが原因ですが、
そのpaddingをもって大きいフォントサイズであるため概念的には真ん中に寄っていても見た目がそうならなくなっています。
（つまりボタンのサイズに合ったフォントサイズではない）

フォントサイズを小さくするかボタンの横幅を広げるかpaddingを0にするか（または複数組み合わせ）で調整してください。

※コメントした通りブラウザによってpaddingの持ち方が違うだけでChromeでも真ん中には寄っていません。
Chromeでの表示（そこだけフォーカス）

投稿2019/08/20 08:26

編集2019/08/20 08:27

m.ts10806

総合スコア80850

m.ts10806

2019/08/20 08:31

ちなみにIEとFireFoxが同じくらい ChromeとEdgeが同じくらいでした内部的に同じ仕組みを使っているってことでしょうね。 reset.cssの導入もご検討ください。

ohyama

2019/08/20 08:42

普通の Firefoxだとpadding: 0で中央に寄ったのですが、Mozilla Firefoxだとpadding: 0にしても利きませんでした。Mozillaの方は何かいい方法がありますでしょうか？

m.ts10806

2019/08/20 08:43

えっと、同じじゃないんですか？私が知らないだけでしょうか。正式名称「Mozilla Firefox」で略称「Firefox」と思ってました。

ohyama

2019/08/20 08:47

申し訳ありません。私の間違いです。同じでした。別のOSに入れてるもう一つのFirefoxだとpadding: 0が何故か利いてなかったのです。正しく中央に寄ってた方がWindowsでもう片方はFreeBSDでした。これはFirefoxの問題ではなく、OSの問題だったりするんですか？

kyoya0819

2019/08/20 08:56 編集

横から失礼します。 WindowsとFreeBSDのバージョンの記載をお願いします。ちなみにm.ts10806さんのおっしゃる通りFirefoxの正式名称はMozilla Firefoxです。MozillaはMozilla Firefoxの開発元のMozilla FoundationのMozillaプロジェクトから来ています。（記憶上）

ohyama

2019/08/20 08:54

windowsは10でFreeBSDは11.2-RELEASE-p9です。

kyoya0819

2019/08/20 08:57

そっちのバージョンではなくFirefoxのバージョンです。

m.ts10806

2019/08/20 08:58

FreeBSD使ったことはないですが、キャッシュとかではないでしょうか？念のためwidthを広げて確認してみてください。

ohyama

2019/08/20 08:59

Windows10側が67.04(64ビット)、BSD側が66.0.3(64ビット)です。申し訳ないです。