Question

如果您同时在Chrome和FF中查看，则差异很明显。在Firefox中，“：before”和“：after”伪类无法正常工作。我该如何解决这个问题？

编辑：我需要它与跨浏览器兼容。此版本适用于IE，但不适用于FF：http://jsfiddle.net/tNg2B/13/ 我基本上删除了：before和：after，并添加了两个<span>的

Answer 1

如果您打算使用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/

Answer 2

您的解决方案过于复杂，无法解决常见问题。只需几个简单的规则就可以做到这一点，甚至更简单的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/

Answer 3

firefox的用户代理样式表在按钮元素的行高上放置了！important。我得到它甚至在firefox使用浮动....这对我没有意义bc我认为生成的内容需要绝对定位...反正。你可以在这里看到它：

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

只需将它们放在“@ -moz-document url-prefix（）{}”中即可提供firefox样式

但我要说@Dennis和@derekerdmann对你的问题有很好的分数（和解决方案!!!!）。但是如果你没有选择或者你不关心，那就是你的解决方案。

我只测试了ff7.1和chrome 17.0.942.0 dev-m

CSS3：为什么这不适用于FireFox？

3 个答案: