为什么Firefox 3.6改变jQuery和CSS属性？ [英] Why does Firefox 3.6 alter jQuery and CSS properties?

问题描述

为什么Firefox 3.6会改变jQuery和CSS属性？

很好，更具体地来说，
。我有一个交叉淡入淡出插件，以创建两个图像之间放置在彼此的顶部的发光效果。在悬停时，函数（下面张贴）将使顶部图像在200 ms内过渡到0的不透明度，并在悬停时转换回500 m的1的不透明度。我的问题是，原来的图像现在不是显示在Firefox 3.6.6。

HTML看起来像这样：

 < div id =logout-button> 
< img class =fadesrc ='/ 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 b}）; 
  

jQuery Crossfade插件如下所示：

  $ .fn.crossfade = function（）{
 return this.each（function（）{
 var $$ = $（this）; 
 var target = $$。css（'backgroundImage'）。replace（/ ^ url | [\（\）] / g，''）; 
 $$。 （'：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 b $ b $$。stop（）。animate（{opacity：1}，500）; 
}，0）; 
}）; 
}; 
  

解决方案

http://jsfiddle.net/nfLrg/ =nofollow noreferrer> http://jsfiddle.net/nfLrg/

严重的调试，我发现了同样的 carpie 发现，那个..

var target = $$。css（'backgroundImage'）。replace / ^ url | [\（\）] / g，''）;

..在结果周围加引号， code> src ，引号加倍，导致 src =％22< target>％22 >％22 是双倍的报价。

因此，将其更改为。

var target = $$。css（'backgroundImage'）。replace / ^ url | [\（\）] | ['] / g，''）;

..将删除不需要的引号code> | ['] 在正则表达式中添加）

此外，我删除了所有不必要的。 css（）调用，因为它更容易处理css本身内部。

这是我使用的所有CSS：

 ＃logout-button {
} 
＃logout-button img.fade {
 cursor：pointer; 
} 
＃logout-button span.fake img {
 position：absolute; 
} 
  

然而，在jsFiddle CSS中，我留下了更多的标签并评论他们。 / p>

顺便说一下，在IE6，IE7，IE 8，Firefox 3.6，谷歌浏览器5，Opera 10.60，Safari 4.0.5测试和工作完美。

编辑：

其实，我认为有更容易的解决方案。明天回家时我会检查他们。

Why does Firefox 3.6 alter jQuery and CSS properties?

Alright, more specifically. I have a crossfade plugin to create a glow effect between two images that are placed on top of each other. The function (posted below) will make the top image transition to an opacity of 0 in 200 ms on hover and transition back to an opacity of 1 in 500 ms on hover-off. My problem is that the original image is not being displayed now within Firefox 3.6.6.

HTML looks like this:

  <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 looks like this:

  #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 functions page looks like this:

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

jQuery Crossfade plugin looks like this:

    $.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);
        });
    };

解决方案

Here, this will do it: http://jsfiddle.net/nfLrg/

After some serious debugging there, I found out same what carpie found, that..
var target = $$.css('backgroundImage').replace(/^url|[\(\)]/g, '');
..leaves quotes around the result, and when you insert it later in image src, the quotes are doubled resulting in src="%22<target>%22" with %22 being the doubled quote.

Therefore, changing it into..
var target = $$.css('backgroundImage').replace(/^url|[\(\)]|['"]/g, '');
..will remove the unneeded quotes. (see the |['"] added inside regex)

Plus, I removed all the unnecessary .css() calls, because it is much easier to handle those inside css itself.

This is all CSS I used:

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

And, yeah, in jsFiddle CSS I left more tags and commented them.

By the way, tested and works perfectly on IE6, IE7, IE 8, Firefox 3.6, Google Chrome 5, Opera 10.60, Safari 4.0.5. And that kind of gives me feeling that it should work on other browsers too.

EDIT:

Actually, I think there are easier solutions available. I will check for them when I get home tomorrow.

这篇关于为什么Firefox 3.6改变jQuery和CSS属性？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！