Html 提交按钮CSS问题

我正在为我的提交按钮使用一些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中摆脱这个丑陋的空间！有人能帮我弄清楚它为什么这样做吗

Firefox在按钮/输入填充方面有些异常。我不知道为什么会这样，为什么这个问题在公开记录的情况下仍然存在。无论如何，请查看类似的内容，并查看表单部分-例如，这是他们应用于firefox的一个修复程序：

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

由于您的左精灵依赖于17像素的左填充。按钮，如果FF在默认情况下添加两个像素，可能会影响图像对齐。你可以尝试的另一件事是减少左边的填充量，看看图像是否对齐

---

这有帮助吗？

Firefox在按钮/输入填充方面有些异常。我不知道为什么会这样，为什么这个问题在公开记录的情况下仍然存在。无论如何，请查看类似的内容，并查看表单部分-例如，这是他们应用于firefox的一个修复程序：

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

由于您的左精灵依赖于17像素的左填充。按钮，如果FF在默认情况下添加两个像素，可能会影响图像对齐。你可以尝试的另一件事是减少左边的填充量，看看图像是否对齐

---

这有用吗？

第一件事。。你为什么用这么大的图片

简化的

或者最好尽量做到这一切，不带图像

示例如何执行；）

---

第一件事。。你为什么用这么大的图片

简化的

或者最好尽量做到这一切，不带图像

示例如何执行；）

---

在firefox中，按钮看起来完全乱七八糟，这仅仅是因为我吗？不仅仅是图像之间的空间

这样对我更合适：

---

是不是只有我一个人觉得firefox的按钮看起来乱七八糟？不仅仅是图像之间的空间

这样对我更合适：

---

您是否无法使用CSS3？如果可以的话，你不需要通过所有的工作来设计一个按钮。另外，您可以使用可视化生成器（例如：）您是否无法使用CSS3？如果可以的话，你不需要通过所有的工作来设计一个按钮。另外，你可以使用视觉发生器（例如：）Alex，谢谢你。它在Firefox中看起来不错，但现在在其他浏览器中看起来很奇怪（Alex，谢谢你。它在Firefox中看起来不错，但现在在其他浏览器中看起来很奇怪。）(