Facebook发送按钮导致水平滚动答案

【问题标题】：Facebook Send button causing horizontal scrollFacebook发送按钮导致水平滚动
【发布时间】：2011-11-24 23:45:43
【问题描述】：

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

以下是一些屏幕截图：

在点击发送按钮之前http://imgur.com/wv2HZ
点击发送按钮后http://imgur.com/BRUeT

视图中的代码：

fbsend.html.erb（使用 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>

如何解决此问题，使弹出窗口适合屏幕并且不会导致水平滚动条？

谢谢

【问题讨论】：

标签： css facebook button send horizontal-scrolling

【解决方案1】：

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

这种方法的一个问题是评论框顶部的小评论“指针”三角形将不再瞄准触发按钮。也许父容器上的 overflow:hidden 可以让您隐藏该部分。

祝你好运！

【讨论】：

我需要将left:-343px; 应用到span.fb_send_button_form_widget 和.left: 365px; 到.nub 以按预期显示小部件。但是当我在 CSS 中提到这些属性时，它并不适用。 +1 的建议。但它并没有解决问题。
抱歉耽搁了 - 我只在 facebook 按钮演示页面上尝试过，但它似乎有效。 nub 类是否适用于 iframe 中的内容？如果是这样，那么它不会有任何影响，因为您无法更改 iframe 的内容，而是需要将样式应用于 iframe 元素本身。
我刚刚看到您在 nub 类方面指的是小指针。为了隐藏这一点，您可能需要使用一些 CSS 技巧，可能会在 iframe 周围使用一个包装容器，该容器会切断顶部并有自己的边框来补偿。感觉有点骇人听闻，但这是适合你的 iframe！
我认为 iframe 是由 FB javascript 动态创建的，这就是 CSS 没有被应用到它的原因。

【解决方案2】：

将display:none 添加到#fb-root 对我有用：

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

【讨论】：

【解决方案3】：

好吧，在图片中，发送框在单击时会通过滚动条扩展窗口的宽度，因此您可以滚动到该框。这很正常。您的选择：

一个。将发送按钮进一步向左移动，以便在单击时不会超出窗口边框，因此不需要滚动条。

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

【讨论】：