带有填充的伪元素Firefox问题答案

【问题标题】：pseudo-elements firefox problem with padding带有填充的伪元素Firefox问题
【发布时间】：2011-08-24 07:59:54
【问题描述】：

见http://jsfiddle.net/e5tsL/
在 chrome 中，按钮按应有的方式呈现，仅在 FireFox 中， ::before 和 ::after 由于填充而向右呈现一点。

有没有办法解决这个问题？

【问题讨论】：

我在 bugzilla 中创建了一个错误：bugzilla.mozilla.org/show_bug.cgi?id=681596
我最终使用了锚点而不是按钮，并使用 JavaScript 模拟了该功能。
这是一个额外简化的测试用例，我也会将其添加到 Mozilla 错误跟踪器中：jsfiddle.net/chriscoyier/e5tsL/8
我遇到了这个 QA 来寻找相同问题的解决方案，我讨厌为提交按钮使用锚标记，但在这种情况下它确实解决了问题。我试过的所有其他浏览器都很好，FF 8 添加了各种额外的填充。
此外，如果可以接受或按钮中已有跨度，则在按钮中添加一个元素来处理填充/边距也可以。

【解决方案1】：

据我所知，您发现了一个 FIrefox 错误。我说这是一个错误，因为如果它们不是伪元素，我会重新创建（尽可能接近）实际的节点结构。现在，您可能需要了解我更正的Firefox magical padding bug，但即便如此，我仍然会得到不同的结果：

该小提琴有两个按钮，在 Chrome、Safari 和 Opera 中看起来相同，但在 Firefox 中损坏。

一种解决方案是为 Firefox 提供一个样式表（以某种方式，可能需要 jQuery），遵循以下规则：

button::before, button::after { left: -12px; }

这会将其移回并对齐内部元素。当然，如果 Mozilla 修复了这个错误，它们会突然被转移到错误的方向。

或者，您可能只想找到其他方法来重新创建效果，而不使用伪节点、定位等的复杂混合。（例如，您可以通过以下方式获得非常相似的效果 [减去曲线]使用 CSS3 渐变。这对浏览器的负担要小得多，并且对大多数最终用户来说是 99%。）

更新：这是一个仅使用渐变的示例：http://jsfiddle.net/cXHCH/1/

肉眼看几乎是一样的（不包括active状态），维护起来也简单很多。使用Ultimate CSS Gradient Generator选择的渐变

【讨论】：