CSS：按鈕在Chrome尺寸是不同比Firefox

我有以下的HTML代碼：CSS：按鈕在Chrome尺寸是不同比Firefox

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

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

任何想法爲什麼？

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

來源

2010-06-02 Hank

你嘗試通過明確的風格設置的寬度是多少？ – SiN 2010-06-02 07:21:06

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

來源

2010-06-02 02:44:51 corroded

所以我只是添加填充，它仍然沒有幫助 – Hank 2010-06-02 02:50:45

就像我說過你還必須設置邊框等如果你想在SO這裏看起來像「添加註釋」按鈕的按鈕，它有邊框：1px固體＃000，邊距約5px，背景色爲#ccc。（所有近似值只是在我的頭頂抱歉：P） – corroded 2010-06-02 03:51:27

你的意思是「發佈你的答案」按鈕？ – 2010-08-12 12:15:22

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

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

這不回答「爲什麼」，但有人解釋說，一個。

來源

2010-06-02 02:53:48

+10

如果只有客戶理解... – andrhamm 2011-03-03 22:02:48

雖然這是真的，我同意它（我每天都在使用該前提），但按鈕大小同時影響頁面的可用性和可訪問性。考慮到這些，更大的按鈕目標可能非常有價值。 – 2011-05-17 20:57:32

如果你的按鈕是獨立的，這可能是一個很好的解決方案。但是，只要緊跟其他元素應該具有相同的高度並且在底部對齊，佈局就會中斷。 – philipp 2011-05-31 20:54:23

，沒有人在這裏提的事情是，Chrome的重置這些元素的CSS：所以不管

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

你設置填充到，據我所知，它會被覆蓋由Chrome。我曾嘗試使用!important以及其他技術，但仍然沒有運氣。如果有人對此有任何洞見，我很想知道。

來源

2010-08-10 19:02:14 Jacob

在此處，「發佈您的答案」按鈕*的外觀將被覆蓋。 – 2010-08-12 12:14:25

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

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

來源

2010-12-03 07:59:22

我發現我不得不給一個負邊距讓Firefox按鈕匹配Chromium。 – 2011-07-21 13:08:28

我不得不給你一個+1，非常有幫助！爲什麼你不能在Firebug中看到Mozilla專有的僞類？ Chrome擁有它們。 – Kirn 2012-04-03 20:00:21

+1，因爲它似乎刪除按鈕文本上的一些隨機水平「填充」，但我仍然得到1px以上和以下的文本，不應該在那裏。 – Armand 2012-06-06 11:27:58

嘗試使用-webkit-box-sizing:content-box，然後閱讀箱模型。

來源

2010-12-16 06:46:48 MeHere

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

結果很不錯。似乎是兩種瀏覽器（FF和Chrome在Linux中）正確的......比如我已經把：

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

也許這只是我的幸運日......不過你可以試試。

來源

2011-10-14 15:59:16 Mela

要在兩個瀏覽器上獲得相同的大小，您必須將相同的初始值設置爲所有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; 
    }

現在你必須修復您的網頁上某些方面的變化，但它的外觀上的所有幾乎相同瀏覽器。

來源

2012-12-21 16:22:33

試試這個

/* 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; 
}

來源

2016-11-29 11:22:09

CSS：按鈕在Chrome尺寸是不同比Firefox

回答

相關問題