Firefox12：多個CSS類似乎並沒有爲我

Question

工作，我有我的不同顏色的網頁上的幾個按鈕。我有一個類的按鈕的形狀，然後幾個類給他們的顏色。

.button { 
    font-family:"Helvetica Neue W01 75 Bold", Helvetica, Arial, Sans-serif;  
    text-decoration: none; 
    white-space: nowrap; 
    color: #333; 
    padding: 13px 15px; 
    display: inline-block; 
    font-size: 1em; 
    font-weight: bold; 
    text-align: center; 
    -webkit-border-radius: 8px; 
    -moz-border-radius: 8px; 
    border-radius: 8px; 
    -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1); 
    -moz-box-shadow: 0 1px 0 rgba(0,0,0,0.1); 
} 

a.button { 
    color: #333; 
} 

.black.button { 
    background-color: #dedede; 
    background: -webkit-gradient(linear, left bottom, left top, color-stop(0.1, #D3D3D3), color-stop(0.45, #EFEFEF), color-stop(0.90, #D3D3D3)); 
    background: -moz-linear-gradient((linear, left bottom, left top, color-stop(0.1, #D3D3D3), color-stop(0.45, #EFEFEF), color-stop(0.90, #D3D3D3)); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=##EFEFEF, endColorStr=##D3D3D3); 
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#EFEFEF, endColorstr=#D3D3D3)"; 
    -webkit-appearance: push-button; 
} 


.black.button:hover { 
    background: #E2E2E2; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#E2E2E2, endColorStr=#E2E2E2); 
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#E2E2E2, endColorstr=#E2E2E2)"; 
} 

.orange.button { 
    background-color: #ffaa44; 
    background: -webkit-gradient(linear,left bottom, left top, color-stop(0.22, rgb(255,144,9)), color-stop(0.81, rgb(255,170,68))); 
    background: -moz-linear-gradient(center bottom, rgb(255,144,9) 22%, rgb(255,170,68) 81%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#ffaa44, endColorStr=#ff9009); 
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffaa44, endColorstr=#ff9009)"; 
} 

.orange.button:hover { 
    background: #ff9009; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#ff9009, endColorStr=#ff9009); 
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff9009, endColorstr=#ff9009)"; 
} 

我使用它們，如：

<a class="orange button" href="#">Click Me</a> 

這個工作在Chrome和Safari，但在Firefox12（和IE）無法正常工作。所有我看到的是一個白色的盒子「ClickMe」（因此可能是.button應用，但不.orange）

從我讀，這在Firefox的支持。但我無法弄清楚我的樣式表中有什麼問題。

當我做了一個「檢查元素」，Firefox中顯示了類如a.orange.button，但在樣式選項卡，它亙古不顯示這些類。它正在挑選我的樣式表，因爲頁面的其餘部分顯示正常。

我在這裏錯過了什麼？

Answer 1

看來，如果你刪除無效的CSS代碼工作。我想知道，如果你在你原來的CSS代碼，這些精確的線（與...和未封閉的括號 - 這應該引起問題）：

• background: -webkit-gradient(...
• border-radius:...

Cleaned up jsFiddle Demo

問題肯定不是多個類。 They work fine in every modern browser。

---

更新：我發現基於this jsFiddle問題。正是這種聲明：

.black.button { 
    background: -moz-linear-gradient((linear, left bottom, left top, color-stop(0.1, #D3D3D3), color-stop(0.45, #EFEFEF), color-stop(0.90, #D3D3D3)); 
} 

你有一個更開放(比-moz-linear-gradient之後需要。

正確版本（jsFiddle）：

.black.button { 
    background: -moz-linear-gradient(linear, left bottom, left top, color-stop(0.1, #D3D3D3), color-stop(0.45, #EFEFEF), color-stop(0.90, #D3D3D3)); 
} 

Answer 2

嘗試使用類似下面的

background: -moz-linear-gradient(top left, white, black); 

-webkit-gradient是WebKit瀏覽器 - Chrome和Safari瀏覽器; Firefox不是一個Webkit瀏覽器。

看發現@linear gradientshttp://jsfiddle.net/Wfxym/

的一些注意事項，尤其是Cross-browser CSS gradient（在Firefox的實施細節可以在MDN發現：https://developer.mozilla.org/en/CSS/linear-gradient）