Firefox添加的2px填充提交按鈕

Question

您好，我似乎有一些問題，Firefox添加2個額外像素的填充提交按鈕。我測試了鉻和IE9這兩個瀏覽器呈現代碼確定，Firefox似乎在底部與右上角corner.Here的關鍵背景的提交按鈕里加入2像素填充是網站：

www.thanathos.host22.com

這是該站點的代碼：

<form method="post" action="index.html"> 
       <input type="text" value="Username"/> 
       <input type="text" value="Password"/> 
       <input type="submit" id="submit" value=""/> 
       <img src="img/header/key.png" alt="" id="key"/> 
     </form> 

    header section form input{ 
     color:#b3aaaa; 
     border:1px solid #cccccc; 
     float: left; 
     padding:5px 8px; 
     margin-left: 6px; 
    } 

我該如何解決這個問題？

如果沒有這個解決方案，請給我一個解決方案，女巫的輸入文本與輸入提交相同，輸入文本是從上到下的中心？

編輯：我在另一臺計算機檢查這一點，似乎火狐呈現此正確我也遇到過這類問題之前，同樣的瀏覽器版本顯示的網站在不同計算機上有些不同。最後一次類似的事情發生在chrome中，我永遠無法解決這個問題。

任何人都知道爲什麼相同的瀏覽器會在具有相同屏幕尺寸和分辨率的不同計算機上呈現不同的頁面？

Answer 1

我有這樣的問題。後來我發現這個CSS啄上解決了這個問題：

input::-moz-focus-inner { border:0; padding:0 } 

將此溶液評論給這個博客帖子：

Bulletproof CSS input button heights

正如帖子裏說：這是因爲火狐（用戶代理）擁有CSS款式使用!important，而任何人試圖去覆蓋CSS屬性都不會得到應用。

Answer 2

**我離開這個在這裏，因爲我認爲這是非常有用anywhoo .. **

在任何情況下嘗試訪問剛剛按鈕和玩的CSS吧：

input[type="submit"] { 
    padding-bottom: 3px; 
} 

編輯

好的，您的解決方案存在問題，因爲您將圖片放置在按鈕上方，您將難以實際點擊提交按鈕。如果將鼠標懸停在鍵上，您會看到它不會更改爲指針=不可點擊。

我建議你刪除圖像標籤，而不是將它用作提交按鈕的背景。事情是這樣的：

input[type="submit"] { 
    padding-bottom: 3px; 
    background: url(path-to-image); 
    border: none; 
    height: "img-height"; 
    width: "img-width"; 
} 

如果圖像的大小是正確的，也因爲你似乎在提交按鈕某種背景的媒體鏈接。編號去做一個圖像是正確的大小，其中包含背景和關鍵圖像（我希望這最後一句話使一些sence）。

另一個可能的問題可能是您的按鈕中沒有文本，但該按鈕應該繼承css中較早的lineheight/font-size，因此可能會更多地擴展submit-button。嘗試添加像font-size：1px之類的東西。