在火狐切片盒

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