在Chrome和Firefox中，jQuery滑出类似Facebook的框看起来不同

我正试图在一个网站上添加一个类似Facebook的滑出框，并且在Chrome上运行良好，但在Firefox和IE中，它并没有完全收回，也没有用背景色填充整个框。有人能告诉我我错过了什么吗

实时URL为：

这里有一个JS提琴，它似乎在两种浏览器中都能很好地工作，所以我不确定我在live站点上搞砸了什么：下面是必要的代码：

    <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>​

jQuery（函数（$）{
$（文档）.ready（函数（）{
$（'#panelHandle'）。悬停（函数（）{
$（“#侧面板”）。停止（真、假）。设置动画({
“左”：“0px”
}, 900);
}，函数（）{
jQuery.noConflict（）；
});
jQuery（“#侧面板”）.hover（函数（）{
//无所事事
}，函数（）{
jQuery.noConflict（）；
jQuery（“#侧面板”）.animate({
左：'-201px'
}, 800);
});
});
});
/*退出社交网络*/
#侧面板{
宽度：292px；
位置：固定；
左：-292px；
最高：15%；
高度：590px；
}
#面板手柄{
高度：128px；
宽度：40px；
边界半径：0 5px 5px 0；
浮动：左；
光标：指针；
}
#面板内容{
浮动：左；
宽度：292px；
高度：590px；
背景色：#EEEEEE；
}
#面板手柄{
左：292px；
位置：相对位置；
顶部：-590px；
}
​

---

谢谢你能提供的任何帮助

对于背景问题，您需要在div-iframe标记中添加一行，如下所示：

背景：#ccc

其中#ccc可以是十六进制代码或任何您想要填充的颜色

将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>

将侧面板处理更新为：

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

---

也许你可以补充一些关于为什么要做出这样的改变的评论？