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

Question

根據Mozilla 開發人員網絡，從 Firefox 3.6 開始支持 background-size，但是，它顯然不適用於我的 OS X 版本的Firefox 5 。 在 Safari 中看起來不錯，但Firefox 5顯示不正確。 有錯誤嗎？ 為什么我不能讓它在 Firefox 中工作？

HTML：

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

CSS：

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

這是一個 jsfiddle ，它表明它無法正常工作。

Answer 1

我不確定發生了什么，但如果您有以下情況，它會起作用：

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

http://jsfiddle.net/nstV7/3/

我的猜測是background屬性覆蓋了background-size屬性。 但是，這並不能解釋為什么 Firefox 的行為與 Safari 不同。

Answer 2

我最近在以下情況下遇到了同樣的問題： Win10 + Firefox 55.0.3 64its ，背景圖像未顯示

我用其他一些瀏覽器測試過，沒問題，我可以看到圖像。 例如：使用 Win10 + MS Edge 和 Win10 + IE11工作正常

因為我不想使用JavaScript或供應商前綴（ -moz- 等），所以我去了 w3c.org 試圖搜索錯誤之處，不幸的是我沒有找到解決方案，但我決定嘗試聲明所有值：

我改變了這個：

background-size: contain;

進入這個：

background-size: contain contain;

我發布並測試了它，它在以下工作：

1. Win10 + 微軟邊緣
2. Win10 + 微軟 IE 11
3. Win10 + Firefox 55 / 64位
4. Win10 + 歌劇
5. 贏服務器 2008 + FireFox 55 / 32bits
6. 贏服務器 2008 + MS IE 11
7. 贏服務器 2003 + FireFox 52 / 32bits
8. 贏服務器 2003 + MS IE 6
9. 贏 7 + FireFox 54 / 32bits
   10. 贏 7 + 微軟 IE 11

我希望這對想要避免使用瀏覽器腳本語言或供應商前綴的人有所幫助。