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

工作，我有我的不同顏色的網頁上的幾個按鈕。我有一個類的按鈕的形狀，然後幾個類給他們的顏色。Firefox12：多個CSS類似乎並沒有爲我

.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，但在樣式選項卡，它亙古不顯示這些類。它正在挑選我的樣式表，因爲頁面的其餘部分顯示正常。

我在這裏錯過了什麼？

來源

2012-06-14 zaphod

我從你的代碼中創建一個[的jsfiddle（http://jsfiddle.net/RVdCR/）。 – kapa

你能具體說了什麼不工作（如做哪些類做的工作）？在'background：-webkit-gradient（...'和'border-radius：...'）被刪除後爲我工作。我使用的是FF13，它的工作原理就是讓你知道（減去webkit的東西和空的邊界半徑）。 – Fewfre

哪裏是真正的CSS代碼？橢圓點表示缺少某些東西。 –

看來，如果你刪除無效的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)); 
}

來源

2012-06-14 20:01:32 kapa

不，我的樣式表中沒有省略號;只是這些課程很大，我不想在這個問題上混亂。我正在看整個班級的jsFiddle，它很有用。因此，需要仔細閱讀樣式表，瞭解爲什麼直接加載時不起作用。 – zaphod

@zaphod如果您設法分享顯示無法使用的內容，我很樂意提供幫助。 – kapa

我用我的實際課程更新了這個問題。會發生什麼是我看到一個半徑爲白色的盒子（可能是.button）和'Click Me'。 .orange不適用。這是在Firefox12（和IE）上。我錯過了一些東西，但無法弄清楚什麼。希望你能看看。 – zaphod

嘗試使用類似下面的

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

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

看發現@linear gradients http://jsfiddle.net/Wfxym/

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

來源

2012-06-14 20:01:24

這是真的，但'-webkit-gradient'定義不應該導致所有樣式無效。 – kapa

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

回答

相關問題