CSS：Chrome中的按鈕大小與Firefox不同

Question

我有以下HTML代碼：

<style type="text/css">
.submitbutton{margin-left:-2px;padding:1px}
</style>
...
<form> 
... 
<input class=submitbutton type=submit value="Create Listings" /> 
</form>

在Firefox中，輸入按鈕具有比Chrome更多的填充。

有什么想法嗎？

更新：如果你想知道為什么我有負余量 - 這是因為在輸入字段和輸入按鈕之間 - 存在太多空間。

Answer 1

/* Remove button padding in FF */
button::-moz-focus-inner {
    border:0;
    padding:0;
}

您將在Chrome和Firefox中獲得相同的按鈕外觀。

Answer 2

即使您作為不同瀏覽器中的開發人員測試並看到按鈕的不同，用戶也不會。 很容易專注於用戶不會注意到的事情：用戶可能有Firefox或其他IE或Chrome，但不是全部。 用戶很少會隨着時間的推移切換瀏覽器，更不用說在它們之間切換並抱怨幾個像素差異。

因此，如果您一次只考慮一個瀏覽器中的按鈕和體驗，並且如果它在該體驗/瀏覽器中運行良好，那么就不必花費更多時間。 而是轉到下一步。

這並不能回答“為什么”，而是有人解釋了這一點。

Answer 3

表單元素的呈現方式不同（默認值），具體取決於操作系統和/或瀏覽器。 如果您希望表單元素（輸入字段，提交按鈕等）在所有實例中看起來都相同，則必須使用邊框，填充和邊距明確設置它們的樣式。

Answer 4

這里沒有人提到的是Chrome重置這些元素的CSS：

input[type="button"],
input[type="submit"],
input[type="reset"],
input[type="file"]::-webkit-file-upload-button,
button

所以無論你設置什么填充，據我所知，它將被Chrome覆蓋。 我嘗試過使用!important以及其他技術但仍然沒有運氣。 如果有人對此有任何見解，我很想知道。

Answer 5

嘗試這個

/* Browser Firefox to match the Chrome */
#buttonid::-moz-focus-inner, .buttonclass::-moz-focus-inner, button::-moz-focus-inner {
    padding: 0 !important;
    border: 0 none !important;
}

Answer 6

嘗試使用-webkit-box-sizing:content-box ，然后閱讀有關盒子模型的內容。

Answer 7

要在兩個瀏覽器上獲得相同的大小，您必須為所有CSS元素設置相同的初始值，例如重置。

這就是我解決問題的方法：把它放在你的css文件的開頭

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td, a
    {
      margin-top: 0px;
      margin-right: 0px;
      margin-bottom: 0px;
      margin-left: 0px;
      padding-top: 0px;
      padding-right: 0px;
      padding-bottom: 0px;
      padding-left: 0px;
      border-top-width: 0px;
      border-right-width-value: 0px;
      border-bottom-width: 0px;
      border-left-width-value: 0px;
    }

現在，您必須修改頁面上的某些方面更改，但在所有瀏覽器上看起來幾乎相同。

Answer 8

我現在嘗試在同一時間修改高度和填充。

結果非常好。 對於這兩種瀏覽器（Linux中的FF和Chrome）來說似乎都是正確的...例如我放了：

.classname {
height:20px;
    padding:4px;
}

也許這只是我的幸運日...但是你可以嘗試一下。