为什么 <button> 设置为 0 时在 Firefox 中仍然有填充 [重复]答案

【问题标题】：Why does <button> still have padding in Firefox when set to 0 [duplicate]为什么 <button> 设置为 0 时在 Firefox 中仍然有填充 [重复]
【发布时间】：2017-05-12 08:34:30
【问题描述】：

有人能解释一下为什么<button> 元素不管样式如何仍然有一点填充吗？比较下面 sn-p 中的四个元素：<button> <a> <span> <div>，它们都应用了相同的样式。最后三个看起来相同，但按钮顽固地拒绝丢失 Firefox 中的填充。 Inspector 显示它在 Chrome 中呈现相同但在 Firefox 中不同。

有没有我可以应用的 CSS 规则来控制它？

.style {
  padding: 0px;
  border: none;
  background-color: #000;
  color: #fff;
  font-family: sans-serif;
  font-size: 14px;
  display: inline-block;
}

<button class="style">TEST</button>
<a class="style">TEST</a>
<span class="style">TEST</span>
<div class="style">TEST</div>

【问题讨论】：

你可以在萤火虫中检查，没有按钮的填充，它只是用户代理到正文标签的边距。
正确，没有填充.. 但是.. 有。并且按钮是不同的像素大小。这是什么用户代理风格？
是的，不同的用户代理有自己的css，还有你的浏览器设置，如字体大小、颜色等。
根据链接的问题，解决方案是button::-moz-focus-inner { padding: 0; border: 0; }。看来 normalize.css 会为你做到这一点。
看来这个bug会在FF 53.0a1中修复，见hg.mozilla.org/mozilla-central/rev/f86ce2e2f6a5。另外，请注意，此修复可能也需要应用于 input 元素。最后，请注意使用-moz-focus-inner 的补丁会移除聚焦行为。

标签： html css firefox

【解决方案1】：

这基本上是firefox浏览器的问题，所以尝试添加button::-moz-focus-inner {padding: 0;border: 0}

.style {
  padding: 0px;
  margin: 0;
  border: none;
  background-color: #000;
  color: #fff;
  font-family: sans-serif;
  font-size: 14px;
  display: inline-block;
}
button::-moz-focus-inner {
  padding: 0;
  border: 0
}

<button class="style">TEST</button>
<a class="style">TEST</a>
<span class="style">TEST</span>
<div class="style">TEST</div>

【讨论】：

不..按钮仍然更大。
这可能与操作系统或 Firefox 版本不同，但在我的浏览器中它们的大小不同。
不都是36px X 16px
您正在测试哪个浏览器？
证明：zuma-design.com/shared/so/buttons.png