[英]CSS: Can't get background-size: contain to work in Firefox 5
According to Mozilla Developer Network background-size has been supported since Firefox 3.6, however, it is clearly not working in my OS X version of Firefox 5 .根据Mozilla 开发人员网络,从 Firefox 3.6 开始支持 background-size,但是,它显然不适用于我的 OS X 版本的Firefox 5 。 It looks fine in Safari, but Firefox 5 is not displaying it correctly.
在 Safari 中看起来不错,但Firefox 5显示不正确。 Is there a bug?
有错误吗? Why can't I get this to work in Firefox?
为什么我不能让它在 Firefox 中工作?
HTML: HTML:
<span class="special button">My button</span>
CSS: CSS:
.button {
background-size: contain;
}
.button.special {
background: url("/images/special-button-bg.png");
}
Here is a jsfiddle which shows that it is not working correctly.这是一个 jsfiddle ,它表明它无法正常工作。
I'm not sure what's going on, but it works if you have:我不确定发生了什么,但如果您有以下情况,它会起作用:
.button.special {
background: url("/images/special-button-bg.png");
background-size: contain;
}
http://jsfiddle.net/nstV7/3/ http://jsfiddle.net/nstV7/3/
My guess is that the background
property is overriding the background-size
property.我的猜测是
background
属性覆盖了background-size
属性。 However, that doesn't explain why Firefox is not behaving the same as Safari.但是,这并不能解释为什么 Firefox 的行为与 Safari 不同。
I recently had the same problem with this in the follow scenario: Win10 + Firefox 55.0.3 64its , the background-image not showing我最近在以下情况下遇到了同样的问题: Win10 + Firefox 55.0.3 64its ,背景图像未显示
I tested with some other browsers and was ok, I could see the image.我用其他一些浏览器测试过,没问题,我可以看到图像。 eg.: with Win10 + MS Edge and Win10 + IE11 was working correctly
例如:使用 Win10 + MS Edge 和 Win10 + IE11工作正常
Because I did not want to use JavaScript or Vendor Prefix ( -moz- etc. ) I went to w3c.org trying to search what was wrong, unfortunately I did not found the solution but I decided to try to declare all values:因为我不想使用JavaScript或供应商前缀( -moz- 等),所以我去了 w3c.org 试图搜索错误之处,不幸的是我没有找到解决方案,但我决定尝试声明所有值:
I changed this:我改变了这个:
background-size: contain;
Into this:进入这个:
background-size: contain contain;
I published and tested, and it's working in the following:我发布并测试了它,它在以下工作:
I hope this helps someone which wants to avoid the use of Browser Script languages or vendor prefixes.我希望这对想要避免使用浏览器脚本语言或供应商前缀的人有所帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.