提交按鈕CSS問題

Question

我爲我的提交按鈕使用了一些CSS樣式，並且它們看起來很好，除了在Firefox中左邊和主圖像之間有一個空格。下面是我使用的是什麼：

button.buttons { 

background: none; 
background-image: url(images/button_left_sprite.png); 
display: block; 
border: none; 
margin: 0 10px 10px 0; 
padding: 0 0 0 17px; 
cursor: pointer; 
font-weight:normal!important; 
color: #111111; 
} 

button:hover.buttons {border: none; } 
button.buttons span { 
background-image: url(images/button_sprite.png); 
padding: 9px 20px 10px 5px; 
font: 12px 'Droid Sans',arial,sans-serif; 
} 

/* Green Button */ 
button.btn_green {background-position: 0 569px;color: #435425;} 
button.btn_green:hover {color: #435425!important;} 
button.btn_green span { background-position: 100% 569px;} 
button:hover.btn_green { background-position: 0 528px;background-color:transparent!important; } 
button:hover.btn_green span { background-position: 100% 528px;background-color:transparent!important; }​ 

並把它放在網頁上：

<button type="submit" class="buttons btn_green left"><span class="left">Update</span></button>​ 

如果有幫助，影像在這裏：

我想要讓這個醜陋的空間在Firefox中離開！任何人都可以幫我弄清楚爲什麼這樣做？

Answer 1

Firefox在按鈕/輸入填充時有一些異常。我不確定爲什麼會出現這種情況，爲什麼儘管公開記錄這個問題仍然存在。無論如何，檢查出像normalize.css和退房形式的部分 - 例如，這是他們申請火狐一個修復：

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

作爲你的左精靈取決於左填充的知識+上.buttons，如果FF默認添加了幾個像素，這可能會讓您的圖像對齊。你可以嘗試的另一件事是減少左填充的數量，看看圖像是否排齊。

這有幫助嗎？

Answer 2

第一件事..你爲什麼用這麼大的圖片？

http://i41.tinypic.com/2mcds8j.png

簡化...

http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-repeat&preval=repeat-x

或更好的嘗試做這一切，與出圖像，

http://www.w3schools.com/cssref/playit.asp?filename=playcss_border-radius

例如如何做到這一點;）

http://www.css3.info/preview/rounded-border/

Answer 3

對我來說，按鈕看起來完全在Firefox中搞砸了嗎？不只是圖像之間的空間。

貌似對我來說更好： http://jsfiddle.net/78eSc/1/

button.buttons { 
    background: none; 
    background-image: url('http://i41.tinypic.com/dv1b6.png'); 
    display: block; 
    border: none; 
    margin: 0 10px 10px 0; 
    padding: 0 0 0 14px; 
    cursor: pointer; 
    font-weight:normal!important; 
    color: #111111; 
} 
button.buttons span { 
    display:block; 
    background-image: url('http://i41.tinypic.com/2mcds8j.png'); 
    padding: 9px 20px 10px 5px; 
    margin:-1px 0 0 0; 
    font: 12px 'Droid Sans',arial,sans-serif; 
}