在火狐切片盒

Question

我嘗試使用Slicebox，但我無法得到它的作品。它在Chrome和Opera中效果很好，我看到一個不錯的回退 - 但在Firefox中，我只有灰色框。我認爲問題在Modernizr csstransforms3d檢測。我不確定Modernizr是否應該檢測3d變換。有誰知道究竟是什麼導致了這種行爲？

Answer 1

它似乎並不兼容 - 他們承認：

請注意，您只能看到支持這些CSS3屬性（目前Chrome和 一個 瀏覽器Slicebox的COOL 3D效果蘋果瀏覽器）。

Answer 2

在閱讀代碼後，我可以找到原因。

所有樣式都使用-webkit前綴編寫，但腳本檢查Modernizr.csstransforms3d。 因此，當Firefox支持csstransforms3d它試圖應用3D變換樣式，但Firefox將忽略所有樣式的前綴-webkit。

我目前的解決方案是正確的前綴的所有樣式：

(function($){ 

    if(Modernizr.csstransforms3d) { 
     var prefix = ""; 
     if($.browser.mozilla){ 
      prefix = "-moz-"; 
     }else if($.browser.msie){ 
      prefix = "-ms-"; 
     }else if($.browser.opera){ 
      prefix = "-o-"; 
     }else{ 
      return; 
     } 
    } 

    // Replace -webkit- with the current browser prefix 
    var postProcessStyles = function(styles){ 
     $.each(styles,function(k,v){ 
      styles[k.replace('-webkit-', prefix)] = typeof v === 'string' ? v.replace('-webkit-', prefix) : v; 
      styles[k.replace('-webkit-', '')] = typeof v === 'string' ? v.replace('-webkit-', '') : v; 
     }); 
    } 

    // Inject style processor 
    var orig = $.Slice3d.prototype._configureStyles; 
    $.Slice3d.prototype._configureStyles = function(){ 
     var origReturn = orig.apply(this,arguments), 
      _this = this; 
     postProcessStyles(this.style);  
     $.each(this.sidesStyles, function(k){ 
      postProcessStyles(_this.sidesStyles[k]); 
     }) 
     $.each(this.animationStyles, function(k){ 
      postProcessStyles(_this.animationStyles[k]); 
     })  
     return origReturn; 
    } 

}(jQuery)); 

演示： http://jsbin.com/onokut/1

代碼： http://jsbin.com/onokut/1/edit