见http://jsfiddle.net/e5tsL/
在chrome中，按钮按原样渲染，只有在FireFox中，:: before和:: after因为填充而向右渲染。
有没有办法解决这个问题？
答案 0 :(得分：2)
据我所知，你发现了一个FIrefox错误。我说这是一个错误，因为如果它们不是伪元素，我会重新创建（尽可能接近）实际的节点结构。现在，您可能需要了解我已更正的Firefox magical padding bug，但即便如此，我仍会得到不同的结果：
这个小提琴有两个按钮，在Chrome，Safari和Opera中看起来相同，但在Firefox中被打破了。
一个解决方案是使用以下规则为Firefox提供样式表（一些如何，可能需要jQuery）：
button::before, button::after { left: -12px; }
这会将它移回并对齐内部元素。当然，如果Mozilla修复了这个bug，它们会突然以错误的方式移动。
或者，您可能只想找到一些其他方法来重新创建效果，而不使用伪节点，定位等的复杂混合（例如，您可以获得非常类似的效果[减去曲线]使用CSS3 Gradients。这对浏览器的负担要小得多，对大多数最终用户来说也是99％。）
更新：以下是仅使用渐变的示例：http://jsfiddle.net/cXHCH/1/
肉眼几乎相同（不包括活动状态），维护起来要复杂得多。使用Ultimate CSS Gradient Generator
选择的渐变