CSS3：为什么不在FireFox中工作？

http://jsfiddle.net/tNg2B/CSS3：为什么不在FireFox中工作？

如果您同时在Chrome和FF中查看它，则区别很明显。在Firefox中，“：before”和“：after”伪类无法正常工作。我怎样才能解决这个问题？

编辑：我需要它是跨浏览器兼容的。此版本在IE，但不是FF：http://jsfiddle.net/tNg2B/13/ 我基本上去掉了：before和：after，并增加了两个<span>的

2011-11-20 Leo Jiang

如果你打算使用CSS3，这样做的权利。您可以使用渐变和圆角这样的：

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

的jsfiddle：http://jsfiddle.net/tNg2B/11/

来源

2011-11-20 04:25:43 Dennis

你过于复杂的解决方案，以一个共同的问题。你可以只用一些简单的规则做到这一点，甚至简单的HTML：

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

添加以下CSS：

button { 
    padding: 0.3em 0.8em; 
    border: 1px solid #FFAA22; 
    background-image: linear-gradient(top, #FFF07E, #FFAA22); 
    background-image: -webkit-linear-gradient(top, #FFF07E, #FFAA22); 
    background-image: -moz-linear-gradient(top, #FFF07E, #FFAA22); 
    border-radius: 10px; 
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 
    font-size: 1.8em; 
} 


button:hover { 
    background-image: linear-gradient(top, #FFF07E, #FFAA22 70%); 
    background-image: -webkit-linear-gradient(top, #FFF07E, #FFAA22 70%); 
    background-image: -moz-linear-gradient(top, #FFF07E, #FFAA22 70%); 
}

，你会得到完全没有图片或伪元素相同的结果。您可以添加简单的背景颜色更改，以及旧版浏览器的后备更改。

这是行动：http://jsfiddle.net/t9ryJ/1/

来源

2011-11-20 04:24:55 derekerdmann

Firefox的用户代理样式表放置一个按钮元素的line-height重要！我知道它甚至在Firefox中使用浮动....这对我来说没有任何意义，但我认为生成的内容需要绝对定位...反正。你可以在这里看到：

http://jsfiddle.net/jalbertbowdenii/aFZTf/1/

只是将它们放置在服务了Firefox的风格 “@ -moz-文档的URL前缀（）{}”

，但我得说，@Dennis和@derekerdmann关于你的问题有非常棒的点子（和解决方案!!!!）。但是，如果您没有选项或者您不在意，那么您的解决方案就是您的解决方案。

我只测试它在ff7.1和铬17.0.942.0 dev -m

来源

2011-11-20 05:47:52 albert