CSS：無法獲得背景大小：包含在Firefox 5中工作

根據Mozilla Developer Network自Firefox 3.6以來一直支持背景大小，但是，它顯然不適用於我的OS X版本Firefox 5。它在Safari中看起來很好，但Firefox 5無法正確顯示。有錯誤嗎？爲什麼我不能在Firefox中使用它？CSS：無法獲得背景大小：包含在Firefox 5中工作

HTML：

<span class="special button">My button</span>

CSS：

.button { 
    background-size: contain; 
} 
.button.special { 
    background: url("/images/special-button-bg.png"); 
}

Here is a jsfiddle這表明它不能正常工作。

2011-07-18 Andrew

請發佈失敗的代碼行。 – Joe

自Firefox 4以來，只支持'background-size'。Firefox 3.6使用'-moz-background-size'。 – BoltClock

如果它顯示不正確，我肯定有東西必須失敗... – BoltClock

我不知道發生了什麼事情，但它的作品，如果您有：

.button.special { 
    background: url("/images/special-button-bg.png"); 
    background-size: contain; 
}

我的猜測是，background屬性重寫background-size財產。但是，這並不能解釋爲什麼Firefox的表現不如Safari。

2011-07-18 21:17:28 thirtydot

謝謝！你是一個拯救生命的人！ – Andrew

啊，討厭的簡寫''背景'屬性再次。 – BoltClock

@BoltClock：是的，所以CSS3'背景'速記有點瘋狂。它似乎只能在Opera中工作。 – thirtydot

我最近有這樣的後續情況相同的問題： Win10 +火狐55.0.3 64its，背景圖像不顯示

我與其他一些瀏覽器測試是確定的，我可以看到圖像。例如：與Win10 + MS Edge和Win10 + IE11正確

工作，因爲我不想使用JavaScript的或供應商前綴（-moz-等）我去W3C。組織試圖尋找什麼是錯的，可惜我沒找到解決辦法，但我決定嘗試申報的所有值：

我改變了這一點：

background-size: contain;

進入這個：

background-size: contain contain;

我發佈並測試了，它的工作原理如下：

我希望這可以幫助別人，其希望避免使用瀏覽器腳本語言或供應商前綴。

2017-09-24 22:59:01

回答