Css Firefox中的水平滚动条由#fb root引起

我正在创建一个响应性设计，但遇到了一个问题，当浏览器宽度小于590px时，Facebook Javascript SDK代码的

div#fb root

会导致水平滚动条。我已经在Chrome、Safari和Firefox上进行了测试，但问题只出现在Firefox上

我应该将

div#fb root

设置为

display:none

还是有更好的方法

谢谢

---

编辑：根据要求，下面的代码是我加载SDK的方式。当我不加载SDK时，水平滚动条就会消失

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'xxxxxxxxxxxxxxx', // App ID
      channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File
      status     : true, // check login status
      cookie     : true, // enable cookies to allow the server to access the session
      xfbml      : true  // parse XFBML
    });

    // Additional initialization code here
  };

  // Load the SDK Asynchronously
  (function(d){
     var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
     js = d.createElement('script'); js.id = id; js.async = true;
     js.src = "//connect.facebook.net/en_US/all.js";
     d.getElementsByTagName('head')[0].appendChild(js);
   }(document));
</script>

window.fbAsyninit=函数（）{
FB.init({
appId:'xxxxxxxxxxxxx'，//应用程序ID
channelUrl:'//WWW.YOUR_DOMAIN.COM/channel.html'，//频道文件
状态：true，//检查登录状态
cookie:true，//启用cookie以允许服务器访问会话
xfbml:true//解析xfbml
});
//这里有额外的初始化代码
};
//异步加载SDK
（职能（d）{
var js，id='facebook jssdk'；if（d.getElementById（id））{return；}
js=d.createElement（'script'）；js.id=id；js.async=true；
js.src=“//connect.facebook.net/en_US/all.js”；
d、 getElementsByTagName（'head'）[0].appendChild（js）；
}（文件）；

显示：none完全正常，因为该

不用于显示任何内容，它是一个占位符，可以将所有FB脚本加载到页面并附加到页面中

当您想使用apprequests API调用时，隐藏FB根div的问题就会出现。这会将用于向好友发送应用程序请求的对话框放置在div中。如果该div被隐藏，则永远不会显示请求对话框。我好不容易才发现这件事

---

您可以尝试在页面加载时设置div的宽度或类似的设置。

我遇到了同样的问题，并尝试了一系列不同的CSS技巧来解决它

设置fb根目录或容器div的宽度并不能解决此问题。也没有任何形式的溢出：隐藏。正如佐尔坦所说，唯一对我有效的方法就是让fb根隐藏起来。在这样做之后，我用几种不同的方法测试了按钮，我没有看到使用这种方法时有任何功能损坏，至少我自己没有

如果他们的脚本按钮要破坏人们的网站，FB真的应该解决这个问题

注意：Firefox是这个问题唯一的浏览器。

这里（仅在Firefox中），它只是在我的页面中间显示了两个空的“iFras-ISH”窗口。

---

我使用显示：无解决了这个问题，但Facebook应该肯定能解决这个问题。

你也应该能够做到：

#fb根目录{
位置：绝对位置；
左：-9999em；
}

而不是让它导致一个水平滚动条。如果出于某种原因您不想使用

display:none如果您确实需要显示，您可以使用JavaScript/jQuery将其移回原处。
将其放入css中

#fb-root {
    position:absolute;
    left:0;
    top:0;
    visibility:hidden;
}

设置
display:none
使滚动条消失，但当我使用FB.ui（）时，没有显示任何对话框

我通过在另一个div中包装#fb root来解决这个问题：

<div id="fbdiv" style="width:0px;height:0px"><div id="fb-root"></div></div>



放置在主体标记的末尾

希望这对某人有所帮助。
作为旁注。fb root也会破坏用
html{height:100%；}body{display:table；height:100%；}
和footer
footer{display:'table row'；width:100%}实现的粘性页脚

Facebook应该解决这个问题。
我也在努力解决这个问题。写关于FB.Canvas.setAutoGrow、.setSize、SetOverflow:hidden on body元素等的无穷无尽的博客文章是怎么回事，当这个简单的隐藏功能（tm）起作用时？其他水平滚动条隐藏方法是关于什么的，他们只是不知道更好的方法。根据FB文档，这个答案是不正确的，FB文档说FB根div不应该被隐藏。看到伟大的帖子！我也遇到了这个问题，现在我有了解决办法！由于这并不能直接回答这个问题，您应该将其作为评论发布，欢迎使用Stack Overflow。通常，当人们共享代码时，他们会给出一些解释。如果你也这么做那就太好了。谢谢