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

Question

我知道有很多 FF/Chrome CSS 问题，但我似乎找不到这个确切的问题。

这是显示问题的 JS Fiddle： http://jsfiddle.net/ajkochanowicz/G5rdD/1/< /a>

（对长 CSS 表示歉意，这是从网站复制的。）

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

Answer 1

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

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

相关：删除 Firefox 中额外的按钮间距/填充

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

Answer 2

除了 auto 之外，您没有指定任何 width。

不同的渲染引擎对网站的渲染方式有不同的看法。

将 width 更改为 4px 并将 :hover 更改为您想要的任何内容怎么样？