Firefoxの送信入力にCSSの幅を適用するにはどうすればよいですか？

Question

アンカーとサブミット入力に同じ幅を適用しました。アンカーは正しく見えますが、サブミット入力の幅が小さすぎます。この問題はFirefoxでのみ発生します。クロムは問題ありません。

ブラウザ

HTML

<a>Save</a> 
<input type="submit" value="save" /> 

CSS

a, 
input { 
    display: block; 
    width: 5em; 
    text-align: center; 
    font-size: 1.4em; 
    padding: 0.6em 2em; 

    /* hack to get the width to work on Chrome */ 
    box-sizing: content-box; 
} 

Answer 1

ブロックの代わりにインラインブロックを試してください

a, 
input { 
    display: inline-block; 
    width: 5em; 
    text-align: center; 
    font-size: 1.4em; 
    padding: 0.6em 2em; 
} 

Answer 2

Chromeで同じ効果が得られます。私はなぜそうは思わないのですが、padding-rightがinput要素に適用されていないように見えます。これをどのように解決すべきかは、具体的なケースによって異なりますが、私は十分に答えようとしていません。問題の直接の原因を知っていれば十分です。

編集
彼の解決策についてのこの記事のOPのコメントを参照してください。 FFで動作させるために必要なことはすべて-moz-border-box: content-box

Answer 3

CSSリセットを追加してみてください。これらの要素のデフォルトの幅/パディングがここで再生されているようです。

a、input {width：0;パディング：0;余裕：0;}

Answer 4

あなたの間違いは、幅やパディングのような寸法の場合はemを使用することです。
emをfont-sizeに使用することをお勧めする記事がたくさんありますが、実際にはサイズ、パディング、余白などには使用しないでください。レイアウトを「フレキシブル」にするには、%を代わりに使用してください。その他はpxに固執する。