jQuery滑出Facebook和盒子在Chrome和Firefox中看起来不一样

我想添加一个Facebook滑出盒子到一个网站，并有机制在Chrome中运行良好，但在Firefox和IE浏览器它不一直缩回，并且不会用背景颜色填充整个框。任何人都可以让我知道我错过了什么吗？jQuery滑出Facebook和盒子在Chrome和Firefox中看起来不一样

的直播网址是：http://www.campyavneh.org/social-network-slider-test

这里有一个JS提琴，这似乎在两个浏览器很好地工作，所以我不知道我在直播网站上搞砸了：http://jsfiddle.net/U9nw6/8/，这里是必要的代码：

<script> 
jQuery(function($) { 
    $(document).ready(function() { 
     $('#panelHandle').hover(function() { 
      $('#sidePanel').stop(true, false).animate({ 
       'left': '0px' 
      }, 900); 
     }, function() { 
      jQuery.noConflict(); 
     }); 

     jQuery('#sidePanel').hover(function() { 
      // Do nothing 
     }, function() { 

      jQuery.noConflict(); 
      jQuery('#sidePanel').animate({ 
       left: '-201px' 
      }, 800); 

     }); 
    }); 
}); 
</script> 

    /* Slide out social networking */ 
    #sidePanel { 
     width:292px; 
     position:fixed; 
     left:-292px; 
     top:15%; 
     height:590px; 
    } 
    #panelHandle { 
     height:128px; 
     width:40px; 
     border-radius:0 5px 5px 0; 
     float:left; 
     cursor:pointer; 
    } 
    #panelContent { 
     float:left; 
     width:292px; 
     height:590px; 
     background-color:#EEEEEE; 
    } 
    #panelHandle img { 
     left: 292px; 
     position: relative; 
     top: -590px; 
    } 

<div id="sidePanel"> 
     <div id="panelContent"> 
      <iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fcampyavneh&amp;width=292&amp;height=590&amp;show_faces=true&amp;colorscheme=light&amp;stream=true&amp;border_color&amp;header=true&amp;appId=132179142482" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:590px;" allowTransparency="true"></iframe>  
     </div> 
    <div id="panelHandle"><img src="/sites/all/themes/yavneh/images/fb_logo_side.jpg" alt="Facebook"></div> 
</div>

感谢您提供任何帮助！

来源

2012-12-12 Sean Cunningham

对于后台的问题，您需要将行添加到您的div iframe标签，应该是这样的：

背景：#CCC

其中#CCC可以是十六进制代码或什么的颜色要填充

来源

2013-01-26 20:42:38 Prophet32

变化iframe来

<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fcampyavneh&amp;width=292&amp;height=590&amp;show_faces=true&amp;colorscheme=light&amp;stream=true&amp;border_color&amp;header=true&amp;appId=132179142482" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:590px;" allowTransparency="true"></iframe>

来源

2013-03-10 19:32:56 Ashutosh

也许你可以添加一些评论，为什么要做出这样的改变？ – benzonico

更新#sidePanel手凌到：

jQuery('#sidePanel').hover(function() { 
    jQuery.noConflict(); 
    jQuery('#sidePanel').animate({ 
    left: '-201px' 
    }, 800); 
});

来源

2014-03-23 14:45:56 hugalves

jQuery滑出Facebook和盒子在Chrome和Firefox中看起来不一样

回答

相关问题