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 位置欄復制而來的，因此可能存在不當共享代碼的問題。