Firefox 的伪元素填充问题
请参阅http://jsfiddle.net/e5tsL/
在 Chrome 中，按钮按其应有的方式呈现，仅在 FireFox 中，由于填充， ::before 和 ::after 会稍微向右呈现。
有办法解决这个问题吗？
See http://jsfiddle.net/e5tsL/
In chrome the button renders as it should, only in FireFox it the ::before and ::after renders a bit to the right because of the padding.
Is there a way to fix this?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
据我所知，您发现了 FIrefox 错误。我说这是一个错误，因为我重新创建了（尽可能接近）实际的节点结构（如果它们不是伪元素）。现在，您可能需要了解 Firefox 神奇填充错误< /a>，我已更正，但即使如此，我仍然得到不同的结果：
http://jsfiddle.net/Dba8h/7/
该小提琴有两个按钮，在 Chrome、Safari 和 Opera 中看起来相同，但在 Firefox 中则损坏。
一种解决方案是为 Firefox 提供一个样式表（某种程度上，可能需要 jQuery），并遵循以下规则：
这会将其移回并对齐内部元素。当然，如果 Mozilla 修复了这个错误，它们就会突然转向错误的方向。
或者，您可能只想找到其他方法来重新创建效果，而不使用伪节点、定位等的复杂混合。（例如，您可以通过使用 CSS3 渐变获得非常相似的效果 [减去曲线]这对浏览器的负担要小得多，并且对于大多数最终用户来说 99% 是相同的。）
更新：这是一个仅使用渐变的示例：http://jsfiddle.net/cXHCH/1/
肉眼看几乎是一样的（不包括活动状态），并且维护起来要简单得多。使用 终极 CSS 渐变生成器 选择渐变
As far as I can tell, you've found a FIrefox bug. I say it's a bug, because I recreated (as close as possible) the actual node structure if they weren't pseudo-elements. Now, you might need to know about the Firefox magical padding bug, which I corrected, but even with that, I still get different results:
http://jsfiddle.net/Dba8h/7/
That fiddle has two buttons that look identical in Chrome, Safari, and Opera, but broken in Firefox.
One solution is to serve up a stylesheet just for Firefox (some how, might require jQuery), with this rules:
That will shift it back over and align the inner elements. Of course, if Mozilla ever fixes the bug, they will suddenly be shifted the wrong way.
Alternatively, you may just want to find some other way to recreate the effect, without using a complex mixture of pseudo-nodes, positioning, etc. (For example, you can get a very similar effect [minus the curve] by using CSS3 Gradients. This would be far less taxing on the browser, and be 99% the same to most end users.)
Update: Here's an example using just gradients: http://jsfiddle.net/cXHCH/1/
It's almost the same to the naked eye (excluding the active state), and it's a lot less complicated to maintain. Gradients selected using Ultimate CSS Gradient Generator