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

回答