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

什么是检测CSS3 背景大小支持的保存方式：封面 ，特别是在IE <9？

以下测试在IE <9中返回误报，因为它实际上设置了背景大小以涵盖 ：

div.style.backgroundSize = 'cover'; 

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

 if ('backgroundSize' in div.style) 

但根据网站http://www.standardista.com/css3/css3-background-properties/#bg11,IE 6/7/8应该返回auto ，只支持cover和contains。

编辑：

我想使用我自己的解决方案，但我检查了Modernizr使用的代码 。 似乎他们使用相同的技术，在IE <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

如果你试图检测低function的浏览器，以避免邮票图像卡在事物的中间，那么一个快速而肮脏的解决方法是

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

如果它未定义，那么你知道你的浏览器function很低，应该采用你的后备方法。 因人而异。

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 }