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

Question

我正在创建一个响应式设计但遇到一个问题,div#fb-root当浏览器宽度小于590px时,Facebook Javascript SDK代码导致水平滚动条.我在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脚本可以加载到附加到你的页面的占位符