CSS：无法获得背景大小：包含在 Firefox 5 中工作答案

【问题标题】：CSS: Can't get background-size: contain to work in Firefox 5CSS：无法获得背景大小：包含在 Firefox 5 中工作
【发布时间】：2017-09-25 07:04:08
【问题描述】：

根据Mozilla Developer Network background-size 从 Firefox 3.6 开始就已支持，但是，它显然不适用于我的 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");
}

Here is a jsfiddle 表示它工作不正常。

【问题讨论】：

请贴出失败的代码行。
background-size 仅从 Firefox 4 开始支持。Firefox 3.6 使用 -moz-background-size。
如果显示不正确，我确定一定有什么问题...
我添加了一个 JSFiddle，它显示它在 FF5 中无法正常工作。

标签： macos firefox firefox-5 css

【解决方案1】：

我不确定发生了什么，但如果你有，它会起作用：

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

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

我的猜测是background 属性覆盖了background-size 属性。然而，这并不能解释为什么 Firefox 的行为与 Safari 不同。

【讨论】：

啊，又是讨厌的简写 background 属性。
@BoltClock：是的，所以 CSS3 background 速记有点疯狂。它似乎只适用于 Opera..
Safari 的实现有问题；根据规范background 重置background-size。见w3.org/TR/css3-background/#the-background

【解决方案2】：

我最近在以下场景中遇到了同样的问题： Win10 + Firefox 55.0.3 64its，背景图片不显示

我用其他一些浏览器测试过，没问题，我可以看到图像。例如：使用 Win10 + MS Edge 和 Win10 + IE11 工作正常

因为我不想使用 JavaScript 或 供应商前缀（-moz- 等）我去 w3c.org 试图搜索错误的地方，不幸的是我没有找到解决方案，但我决定尝试声明所有值：

我改变了这个：

background-size: contain;

进入这个：

background-size: contain contain;

我发布并测试了，它在以下方面工作：

Win10 + MS Edge
Win10 + MS IE 11
Win10 + Firefox 55 / 64 位
Win10+Opera
Win Server 2008 + FireFox 55 / 32bits
Win Server 2008 + MS IE 11
Win Server 2003 + FireFox 52 / 32bits
Win Server 2003 + MS IE 6
Win 7 + FireFox 54 / 32bits
1. Win 7 + MS IE 11

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

【讨论】：