伪元素填充的Firefox元素问题

请参阅http://jsfiddle.net/e5tsL/
在铬按钮呈现，因为它应该，只有在FireFox它:: ::之前和::之后由于填充渲染了一点。伪元素填充的Firefox元素问题

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

我在bugzilla中创建了一个bug：https://bugzilla.mozilla.org/show_bug.cgi?id=681596 –

我最终使用了一个锚而不是一个按钮，并使用JavaScript来模仿该功能。 –

这是一个额外减少的测试用例，我将添加到Mozilla的bug跟踪器中：http://jsfiddle.net/chriscoyier/e5tsL/8/ –

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

那提琴有在Chrome，Safari和Opera看起来完全相同的两个按钮，但在Firefox中破解。

一种解决方案是为一个样式表只适用于Firefox（一些如何，可能需要jQuery的），这个规则：

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

这将在后面转移，并对齐内部元件。当然，如果Mozilla修复了这个bug，他们会突然被错误地转移。

或者，您可能只是想找到一些其他方式来重新创建效果，而不使用伪节点，定位等的复杂混合（例如，您可以获得非常相似的效果[减去曲线]通过使用CSS3渐变这将是对浏览器的税收远远不足，而99％的同大多数最终用户）

更新：这里只用梯度的例子：http://jsfiddle.net/cXHCH/1/

这几乎是与肉眼相同（不包括有效的状态），并且维护起来要简单得多。使用Ultimate CSS Gradient Generator选择的渐变

2011-08-24 08:39:40 OverZealous

回答