Горизонтальная полоса прокрутки в Firefox, вызванная # fb-root

Question

Я создаю адаптивный дизайн, но столкнулся с проблемой, когда код Javascript SDK Facebook div#fb-root вызывает горизонтальную полосу прокрутки, когда ширина браузера меньше 590 пикселей. Я проверял это на 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>

помещается в конце тега body.

Надеюсь, это кому-нибудь поможет.

Answer 3

В качестве дополнительного примечания этот .fb-root также нарушает закрепление нижних колонтитулов с помощью html { height: 100%; } body { display: table; height: 100%; } и нижнего колонтитула footer { display: 'table-row'; width: 100% }

.

Answer 4

поместите это в свой CSS

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

Answer 5

Вы также должны быть в состоянии сделать:

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

и не вызывать горизонтальную полосу прокрутки.Если по какой-то причине вы не хотите использовать display: none;, вы можете переместить его обратно с помощью JavaScript / jQuery, если вам действительно нужно это показать.

Answer 6

Здесь (и только в Firefox) он просто показал два маленьких пустых окна "iframe-ish" в середине моей страницы.

Я решил использовать display: none, но Facebook обязательно должен решить эту проблему.

Answer 7

Я столкнулся с этой же проблемой и попробовал множество различных хитростей CSS, чтобы исправить ее.

Установка ширины fb-root или контейнера div не решает проблему. Ни одна из форм переполнения не скрыта. Единственное, что сработало для меня, это действительно сделать fb-root скрытым, как сказал Золтан. После этого я протестировал кнопку несколькими различными способами, и я не вижу каких-либо нарушенных функций, использующих этот метод, по крайней мере для себя.

Если их кнопка скрипта собирается взломать сайты людей, FB действительно должен решить эту проблему с их стороны.

ПРИМЕЧАНИЕ. Firefox - единственный браузер, с которым сталкивается эта проблема.

Answer 8

Проблема с сокрытием div fb-root возникает, когда вы хотите использовать вызов API apprequests.Это помещает диалог для отправки запросов приложений друзьям в div.Если div скрыт, диалог запроса никогда не будет показан.Я узнал об этом нелегко.

Вы можете просто попробовать установить ширину div при загрузке страницы или что-то подобное.