代码之家 › 专栏 › 技术社区 › sadmicrowave

为什么Firefox3.6会改变jQuery和CSS属性?

firefox css jquery

sadmicrowave · 技术社区 · 15 年前

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 Crossfade插件如下所示:

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

2 回复 | 直到 15 年前

Community CDub 5 年前

在这里,这将做到: http://jsfiddle.net/nfLrg/

卡皮
var target = $$.css('backgroundImage').replace(/^url|[]/g, '');
..在结果周围留引号,稍后在图像中插入时 src ,报价加倍,导致 src="%22<target>%22" %22 是双引号。

因此,将其改为。。
var target = $$.css('backgroundImage').replace(/^url|[]|['"]/g, '');
…将删除不需要的引号(看到了吗 |['"]

.css() 调用,因为在css内部处理这些调用要容易得多。

以下是我使用的所有CSS:

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

而且,是的,在jsFiddle CSS中,我留下了更多的标签并对它们进行了注释。

编辑:

实际上,我认为有更简单的解决办法。我明天到家时去看看。

carpie 15 年前

创建目标值时使用:

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

将上述更改为:

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

将消除额外的报价,并应使其工作。。。

嗯,它对我有用,但我没有一个旧的火狐可用。。。也许只使用后台URL更容易。。。

HTML格式:

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

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/