检测是否支持background-size: cover

Question

什么是一种安全的方式来检测CSS3中的background-size: cover支持，特别是在IE < 9中？以下测试在IE < 9中返回了错误的结果，因为它实际上将background-size设置为cover：

div.style.backgroundSize = 'cover';

当我测试以下内容时，得到的唯一真实结果是：

if ('backgroundSize' in div.style)

根据http://www.standardista.com/css3/css3-background-properties/#bg11网站的说法，IE 6/7/8应该返回auto，仅支持cover和contain。 编辑： 我想使用自己的解决方案，但我已经检查了Modernizr使用的代码。 看起来他们使用了相同的技术，在IE < 9中给我错误的正面结果：设置backgroundSize = 'cover'，然后检查style.backgroundSize == 'cover'。

请参见我的JSFiddle。

- John B.

Answer 1

如果您使用Modernizr，则可以仅下载执行此类任务所需的代码。 http://modernizr.com/download/#-backgroundsize-testprop-testallprops-domprefixes，然后您可以测试。

if (Modernizr.backgroundsize) {
    /* backgroundSize supported */
}

- Fabrizio Calderan

---

谢谢Fabrizio。我想使用自己的解决方案，但已经检查了他们的代码：https://github.com/Modernizr/Modernizr/blob/master/feature-detects/css-backgroundsizecover.js 看起来他们使用类似的代码给我错误的结果：设置样式，然后检查style.backgroundSize == 'cover'。 - John B.

@JohnB。这似乎是他们对 cover 的测试 https://github.com/Modernizr/Modernizr/blob/master/feature-detects/css/backgroundsizecover.js - eyelidlessness

Answer 2

在设置BackgroundSize之前，您需要检查它是否存在作为样式属性。

var supported = ('backgroundSize' in document.documentElement.style);
if(supported){
    var temp = document.createElement('div');
    temp.style.backgroundSize = 'cover';
    supported = temp.style.backgroundSize == 'cover';
};
return supported;

来源：http://upshots.org/javascript/javascript-detect-support-for-background-size-cover

在此之前，您可能还想尝试使用CSS.supports()进行检测。 请参阅MDN：https://developer.mozilla.org/en-US/docs/Web/API/CSS/supports

- Thomas Baumgartner

Answer 3

如果您正在尝试检测低效浏览器以避免在事情的中心卡住邮票图像，那么一个快速而简单的解决方法是：

var rules = document.styleSheets[0].cssRules;

如果它是未定义的，那么你就知道你的浏览器功能较低，应该选择备用方案。个体差异。

- Eric Parker

---

这是错误的建议。一个API的存在并不决定另一个API的存在。最好通过测试可用属性来使用适当的特性检测。这完全可以在不对两个不相关的API做出奇怪的假设的情况下实现。 - eyelidlessness

Answer 4

这只使用JavaScript，没有jQuery，只需检查您正在处理的浏览器版本

//check if Is bad IE. 
var noBGSizeSupport = window.attachEvent && !window.addEventListener 

if(noBGSizeSupport){
    //does not support BG size property
} else {
  // supports background size property
}

- webicy