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