Question

检测对CSS3 background-size：cover 的支持的保存方法是什么，尤其是在IE＆lt; 9？

以下测试在IE中返回误报＆lt; 9，因为它实际上将 background-size 设置为封面：

div.style.backgroundSize = 'cover';

我在测试时获得的唯一真实结果：

if ('backgroundSize' in div.style)

但是根据网站http://www.standardista.com/css3/css3-background-properties/#bg11，IE 6/7/8应该返回 auto ，只有封面和包含不支持。

修改：

我想使用自己的解决方案，但我检查了code used by Modernizr。似乎他们使用相同的技术，在IE中给出了假阳性结果＆lt; 9：设置 backgroundSize ='cover'，然后检查 style.backgroundSize =='cover'。

查看我的JSFiddle。

Answer 1

如果您使用Modernizr，则只能下载执行此类任务所需的代码

http://modernizr.com/download/#-backgroundsize-testprop-testallprops-domprefixes

然后你可以用

进行测试

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

Answer 2

如果您尝试检测低功能浏览器以避免邮票图像卡在中间位置，那么一个快速而肮脏的解决方法就是

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

如果它未定义，那么你知道你的浏览器功能很低，应该采用你的后备方法。 YMMV。

Answer 3

在设置之前，您需要检查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

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
}

检测背景大小的支持：封面

4 个答案: