Facebook发送按钮导致水平滚动

我正在研究Ruby On Rails，并在项目中集成了Facebook发送按钮。当点击“发送”按钮时，弹出窗口将离开屏幕并导致水平滚动条。我在一些博客网站和计算器上尝试了一些解决方案，但无法解决问题。Facebook发送按钮导致水平滚动

下面是一些屏幕截图：

fbsend.html.erb（：

单击发送按钮http://imgur.com/wv2HZ
单击发送按钮http://imgur.com/BRUeT

在查看代码前后使用HTML5代码）

<div class="right"> 
    <script>(function(d, s, id) { 
     var js, fjs = d.getElementsByTagName(s)[0]; 
     if (d.getElementById(id)) {return;} 
     js = d.createElement(s); js.id = id; 
     js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; 
     fjs.parentNode.insertBefore(js, fjs); 
    }(document, 'script', 'facebook-jssdk'));</script> 

    <div class="fb-send" data-href="MY_SITE_URL"></div> 
</div>

application.html.erb

<div id="fb-root"></div> 
<script src="http://connect.facebook.net/en_US/all.js"></script> 
<script src="http://connect.facebook.net/en_US/all.js#appId=MY_APP_ID&amp;xfbml=1"></script> 
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script> 
<script> 
     FB.init({ 
      appId: "MY_APP_ID", 
      cookie: true, 
      xfbml: true 
     }); 
</script>

我怎样才能解决这个问题，所以在弹出将适合屏幕并不会造成横向滚动条？

感谢

来源

2011-09-26 Bongs

我相信评论框被放置到它自己的iframe中，所以你应该能够独立于按钮/等重新放置它在你自己的CSS中。

该方法的一个问题是，评论框顶部的小评论“指针”三角形将不再针对触发按钮。父容器上的overflow:hidden可能允许您隐藏该部分的视图。

祝你好运！

来源

2011-09-26 19:04:41 Dygerati

我需要应用'左：-343px;''要和span.fb_send_button_form_widget''。左：365px;''来向.nub'展示小部件如预期的那样。但是当我在CSS中提到这些属性时，它不适用于它。 +1的建议。但它没有解决这个问题。 – Bongs

对不起，延迟 - 我只在Facebook按钮演示页面上尝试过，但它似乎工作。 nub类是否适用于iframe中的内容？如果是这样，那么它将不会有任何影响，因为您无法更改iframe的内容，而是需要将样式应用于iframe元素本身。 – Dygerati

我刚才看到你指的是nub类中的小指针。为了隐藏这一点，你可能需要使用一些CSS技巧，可能在iframe的环绕容器周围切掉顶部，并且有自己的边框进行补偿。感觉有点骇人听闻，但这是你的内联框架！ – Dygerati

良好，在图片看来发送信箱，用户点击后，被延长了窗口的宽度有滚动条，以便您可以滚动到框。这很正常。您的选择：

a。将发送按钮向左移动，点击后不会越过窗口边界，因此不需要滚动条。

b。将overflow-x:hidden;样式属性添加到您的<body>元素的CSS中。这样，用户就无法看到整个盒子。

来源

2011-09-26 07:58:01 alt

添加display:none到#fb-root为我工作：

<div id="fb-root" style="display:none;"></div>

来源

2012-01-27 12:10:26 kilo

Facebook发送按钮导致水平滚动

回答

相关问题