CSS3：为什么不是'；这在FireFox中不起作用吗？

如果您同时在Chrome和FF中查看，差异是显而易见的。在Firefox中，“：before”和“：after”伪类不能正常工作。我怎样才能解决这个问题

编辑：我需要它是跨浏览器兼容。此版本适用于IE，但不适用于FF：

---

我基本上删除了：before和：after，并添加了另外两个

您将一个常见问题的解决方案过于复杂化了。您只需使用一些简单的规则，甚至更简单的HTML即可实现这一点：

<button type="button">test</button>

在没有图像或伪元素的情况下得到相同的结果。您可以添加一个简单的背景颜色更改，也可以为较旧的浏览器添加一个回退

---

这里是操作：

如果要使用CSS3，请正确操作。可以像这样使用渐变和圆角：

background-image: -webkit-linear-gradient(top, #FFFF00, #FF8000);
background-image: -moz-linear-gradient(top, #FFFF00, #FF8000);
border-radius:15px;

---

JSFIDLE:

firefox的用户代理样式表放置了一个！在按钮元素的行高度上很重要。我在firefox中使用浮动来平衡它……这对我来说毫无意义，因为我认为生成的内容需要绝对定位……无论如何。你可以在这里看到：

只需将firefox样式放在“@-moz document url-prefix（）{}”中就可以了

但是我必须说，关于你的问题，@Dennis和@derekerdmann有非常好的观点（和解决方案！！！！）。然而，如果你没有选择或者你不在乎，那就有你的解决方案

我只在ff7.1和Chrome17.0.942.0 dev-m中测试了它

background-image: -webkit-linear-gradient(top, #FFFF00, #FF8000);
background-image: -moz-linear-gradient(top, #FFFF00, #FF8000);
border-radius:15px;