Facebook发送按钮导致水平滚动
Posted
技术标签:
【中文标题】Facebook发送按钮导致水平滚动【英文标题】：Facebook Send button causing horizontal scroll 【发布时间】：2011-11-24 23:45:43 【问题描述】：我正在开发 Ruby On Rails，并且刚刚在一个项目中集成了 Facebook 发送按钮。当单击“发送”按钮时，弹出窗口将离开屏幕并导致水平滚动条。我在一些博客网站和 *** 上尝试了一些解决方案，但无法解决问题。
以下是一些屏幕截图：
-
在点击发送按钮之前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&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>
如何解决此问题，使弹出窗口适合屏幕并且不会导致水平滚动条？
谢谢
【问题讨论】：
【参考方案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。这样，用户就无法看到整个框。
【讨论】：
以上是关于Facebook发送按钮导致水平滚动的主要内容，如果未能解决你的问题，请参考以下文章