Question

我正在创建一个响应式设计但遇到一个问题，当浏览器宽度小于590像素时，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>

Answer 1

display: none完全正常，因为<div>不用于显示任何内容，它是一个占位符，可以将所有FB脚本加载到页面中并附加到页面

Answer 2

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

我设法通过将＃fb-root包装在另一个div中来解决它：

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

放在身体标签的末尾。

希望能帮助某人。

Answer 3

作为旁注，此.fb-root还会破坏使用html { height: 100%; } body { display: table; height: 100%; }和页脚footer { display: 'table-row'; width: 100% }

实现的粘性页脚

Facebook应该解决这个问题。

Answer 4

当您想要使用apprequests API调用时，会出现隐藏fb-root div的问题。这会将用于发送应用请求的对话框发送给div中的朋友。如果div被隐藏，则永远不会显示请求对话框。我发现了这个困难的方法。

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

Answer 5

我遇到了同样的问题并尝试了一系列不同的CSS技巧来修复它。

设置fb-root或容器div的宽度不能解决问题。任何形式的溢出都没有：隐藏。 Zoltan说，对我来说唯一有用的事实就是隐藏fb-root。在这样做之后，我以几种不同的方式测试了按钮，并且我没有看到任何使用此方法的功能损坏，至少对我自己而言。

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

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

Answer 6

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

我使用display: none解决了问题，但Facebook绝对应该解决这个问题。

Answer 7

您还应该能够：

#fb-root {
    position:absolute;
    left:-9999em;
}

并没有它导致水平滚动条。如果出于某种原因你不想使用display: none;，那么你可以使用JavaScript / jQuery将其移回去，如果你真的需要它的话。

Answer 8

把它放在你的CSS中

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

Firefox中由＃fb-root引起的水平滚动条

8 个答案: