0

根据Mozilla Developer Network的说法，从 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，它表明它无法正常工作。

4

2 回答 2

6

我不确定发生了什么，但如果您有以下情况，它会起作用：

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

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

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

于 2011-07-18T21:17:28.333 回答
0

我最近在以下情况下遇到了同样的问题： 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 + 火狐 55 / 64 位
  4. Win10 + 歌剧
  5. Win Server 2008 + FireFox 55 / 32bits
  6. 赢服务器 2008 + MS IE 11
  7. Win Server 2003 + FireFox 52 / 32bits
  8. 赢服务器 2003 + MS IE 6
  9. 赢 7 + 火狐 54 / 32 位
    1. 赢 7 + 微软 IE 11

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

于 2017-09-24T22:59:01.220 回答