FirefoxとChromeのボタン幅の違い

Question

FF/Chrome CSSの質問がたくさんあることは知っていますが、この正確な質問を見つけることができないようです。

これが問題を示すJSフィドルです： http://jsfiddle.net/ajkochanowicz/g5rdd/1/

（長いCSSについて謝罪し、これはサイトからコピーされました。）

基本的に、FirefoxとChromeは、ボタンの最も幅の内側の幅4と6に2つの異なる値を与えてくれます。何が原因ですか？

Answer 1

あなたはaを指定しませんでした width 以外 auto.

異なるレンダリングエンジンは、Webサイトのレンダリング方法を異なって考えています。

変化するのはどうですか width に 4px と :hover あなたが望むものは何でも？

Answer 2

以下にCSSを追加してみてください。 Firefoxボタンに追加のパディングを追加します。

input::-moz-focus-inner,
button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

関連している： Firefoxで追加のボタン間隔/パディングを削除します

ソース： http://wtfhtmlcss.com/#buttons-firefox-Outline