Firefox 在输入文本和提交中添加 2px 额外填充

Question

根据下面的答案：这是最好的解决方案：.text { line-height: 15px; } input::-moz-focus-inner {border:0; 填充：0； 边距顶部：-1px； margin-bottom:-1px;} 谢谢大家。

我知道 Stackoverflow 上有一些类似的问题。 因为没有一个答案对我有用，而且我已经研究这个问题将近一个星期但没有运气，所以我决定发布这个问题。 请帮忙。

假设我有一个提交按钮和一个文本框，Firefox 总是在元素内添加 2px 的额外填充，我尝试了很多在网上找到的解决方案，但没有一个有效。

在这里测试代码： https ://jsfiddle.net/4f2duwud/7/

HTML:

<form action="http://google.com">
  <input type="submit" class="submit" value="Go to Google">
  <input type="text" class="text">
</form>

CSS：

a.button {
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
  text-decoration: none;
  color: initial;
}
.text {
  padding:3px;
  border: 1px solid gray;
}
.submit {
  padding:3px;
  border:1px solid gray;
}
input[type="reset"]::-moz-focus-inner, 
input[type="button"]::-moz-focus-inner, 
input[type="submit"]::-moz-focus-inner,
input[type="text"]::-moz-focus-inner, 
input[type="file"] > input[type="button"]::-moz-focus-inner { 
  border:0 !important; 
  padding:0 !important;
}

屏幕截图 - 火狐： 屏幕截图 - Chrome：

Answer 1

尝试将line-height明确设置为15px或17px或适合您的任何一个

Answer 2

更新

https://jsfiddle.net/Lv1cb2xr/

input::-moz-focus-inner {
    border: 0;
    padding: 0;
    margin-top:-2px;
    line-height: 17px ;
}

Answer 3

文本输入（Firefox 版本 86）对我有用的是设置背景颜色：

.text {
  padding: 0px;
  background-color: White
}

一旦到位，您就可以设置填充，Firefox 会尊重它。

我不知道为什么background-color: White有效而border: 1px solid gray （正如你在你的帖子中所做的那样）没有。

我可以在链接的 jsfiddle ( https://jsfiddle.net/Lv1cb2xr/ ) 中重现我的结果。 设置border: 1px solid gray确实说服 firefox 尊重填充 - 显然与 OP 的体验不同。

对我来说这似乎是一个 firefox 错误，但毫无疑问如果我要报告它然后 mozilla 会告诉我它在原始的 css 规范中，因此他们对此无能为力但是嘿为什么我不考虑贡献下一轮规范？ 这就是我上次报告错误时发生的情况。 但我并不苦涩——说到底，事实证明他们是完全正确的。 等等，不，其实我还在苦涩。 为什么我还是很苦？ 我不知道，我只是。

默认样式似乎是从 firefox chrome 位置栏复制而来的，因此可能存在不当共享代码的问题。