檢測對背景大小的支持：封面

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 ，僅不支持掩蓋和包含 。

編輯：

我想使用自己的解決方案，但是已經檢查了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

如果您嘗試檢測功能低下的瀏覽器，以避免將郵票圖像卡在中間，那么一種快速而骯臟的解決方法是

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
}