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

我希望这对想要避免使用浏览器脚本语言或供应商前缀的人有所帮助。