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