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