我为我的提交按钮使用了一些 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 在按钮/输入填充方面存在一些异常。我不确定为什么会这样，以及为什么尽管公开记录了问题仍然存在。不管怎样，看看像normalize.css这样的东西并查看有关表单的部分 - 例如，这是他们为 firefox 应用的一个修复程序:
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
因为你的左 Sprite 依赖于 .buttons 上的 17px 左填充，如果 FF 默认添加几个像素，这可能会扰乱你的图像对齐。您可以尝试的另一件事是减少左填充量并查看图像是否对齐。
这有帮助吗？
关于html - 提交按钮 CSS 问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9774794/