Firefox和Chrome之间按钮宽度的差异

Question

我知道有很多FF / Chrome CSS问题，但我似乎无法找到这个问题。

这是一个JS小提琴，显示了问题：http://jsfiddle.net/ajkochanowicz/G5rdD/1/

（长篇CSS的道歉，这是从网站上复制的。）

基本上，Firefox和Chrome为按钮的最内部宽度4和6提供了两个不同的值。我希望它们都是4或更少。造成这种情况的原因是什么？

Answer 1

尝试添加下面的css。 Firefox在按钮上添加了额外的填充。

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

相关：Remove extra button spacing/padding in Firefox

来源：http://wtfhtmlcss.com/#buttons-firefox-outline

Answer 2

您没有指定width以外的auto。

不同的渲染引擎会不同地思考网站的呈现方式。

如何将width更改为4px和:hover到您想要的任何内容？