Firefox 3.6爲什麼改變jQuery和CSS屬性？

Question

爲什麼Firefox 3.6會改變jQuery和CSS屬性？

好的，更具體一點。我有一個交叉淡入淡出插件，用於在兩個放在彼此頂部的圖像之間創建發光效果。該功能（在下面發佈）將使頂部圖像在懸停時在200毫秒內轉變爲0的不透明度，並在懸停關閉時在500毫秒內轉換回不透明度爲1。我的問題是，現在Firefox 3.6.6中沒有顯示原始圖像。

HTML看起來像這樣：

<div id="logout-button"> 
    <img class="fade" src='/img/test/control-logout.jpg' style="background:url(/img/test/control-logout-hover.jpg); border:none;"/> 
    </div> 

CSS是這樣的：

#control-bar #logout-button{ 
     float:right; 
     margin:3px 30px 0 0; 
    } 

    #logout-button img.fade{ 
     margin:-1px 0 0 0; 
     width:33px; 
     height:22px; 
     cursor:pointer; 
     border:none; 
    } 

jQuery的功能頁面看起來是這樣的：

$(window).bind('load', function(){ 
    $("img.fade").crossfade(); 
    }); 

jQuery的淡入淡出插件看起來是這樣的：

$.fn.crossfade = function(){ 
     return this.each(function(){ 
      var $$ = $(this); 
      var target = $$.css('backgroundImage').replace(/^url|[\(\)]/g, ''); 
      $$.wrap('<span style="position: relative;"></span>').parent().prepend('<img>').find(':first-child').attr('src', target).css({border:'none'}); 
      if(jQuery.browser.msie){ 
       $$.css({position:'absolute', left:0, top:'0px', border:'none'}); 
      }else{ 
       $$.css({position:'absolute', left:0, top:'-6px', border:'none'}); 
      }; 
      $$.hover(function(){ 
        $$.stop().animate({opacity: 0}, 200); 
      }, function(){ 
        $$.stop().animate({opacity: 1}, 500); 
      }, 0); 
     }); 
    }; 

Answer 1

他再次，這將做到這一點：http://jsfiddle.net/nfLrg/

經過一番認真的調試那裏，我發現了同樣的東西carpie發現，...
var target = $$.css('backgroundImage').replace(/^url|[\(\)]/g, '');
..leaves引號的結果，並在以後將其插入在圖片src中，報價翻倍，導致src="%22<target>%22"，%22爲加倍報價。

因此，改變成..
var target = $$.css('backgroundImage').replace(/^url|[\(\)]|['"]/g, '');
..will刪除不需要的報價。 （看|['"]加入正則表達式）

另外，我刪除了所有不必要的.css()調用，因爲它更容易處理css內部的那些。

這是所有的CSS我用：

#logout-button { 
} 
#logout-button img.fade { 
    cursor: pointer; 
} 
#logout-button span.fake img { 
    position: absolute; 
} 

而且，是啊，在CSS的jsfiddle我留下了標籤和評論他們。

順便說一句，在IE6，IE7，IE 8，Firefox 3.6，Google Chrome 5，Opera 10.60，Safari 4.0.5上測試和完美工作。這種感覺讓我覺得它也可以在其他瀏覽器上運行。

編輯：

其實，我認爲有更容易的解決方案可用。明天我回家時我會檢查他們。

Answer 2

當您創建與目標值：

 var target = $$.css('backgroundImage').replace(/^url|[\(\)]|/g, ''); 

目標值散發出來包裹在引號（「）。當src屬性被設置時，它被雙引號「」foo.jpg「」，因此是無效的HTML。

更改上面：

 var target = $$.css('backgroundImage').replace(/^url|[\(\)]|"/g, ''); 

將消除額外的報價，並應使其工作...

編輯： 嗯，它爲我工作，但我不有一箇舊的Firefox版...也許這將是更容易只是背景的url工作...

HTML：

<div class="pic"><div class="pic2"></div></div> 

CSS：

div.pic { 
    position: relative; 
    width:50px; 
    height: 48px; 
    background: url(http://static.jquery.com/ui/images/logo.gif); 
    float:right; 
    margin:3px 30px 0 0; 
} 
div.pic2 { 
    position: absolute; 
    top: 0; bottom: 0; 
    left: 0; right: 0; 
    background: url(http://static.jquery.com/files/rocker/images/btn_downloadLarge.gif); 
} 

JS：

$.fn.crossfade = function(){ 
    return this.each(function(){ 
     var $$ = $(this).find('.pic2'); 
     $$.hover(function(){ 
      $$.stop().animate({opacity: 0}, 200); 
     }, function(){ 
      $$.stop().animate({opacity: 1}, 500); 
     }, 0); 
    }); 
} 
$("div.pic").crossfade(); 

您可以看到的jsfiddle一個活生生的例子：http://jsfiddle.net/MntuZ/1/

這對我的作品在FF3.6和Chrome 5（所有我在這臺計算機上有訪問權。）這是假設這個例子做你正在做的事...