提交按钮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之类的内容并查看表单部分 - 例如，这是一个适用于firefox的修复：

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

由于您的左侧精灵依赖于17px的左侧填充。按钮，如果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;
}