Question

我最近在我的网站上添加了一个像facebook一样的按钮，它会导致在不需要时出现水平滚动条。它不会出现在Chrome中，但会出现在Firefox和IE中。

我已经在Firebug中检查了创建的代码，但看不出有什么问题。

以下是该网站的链接，您可以看到：http://www.swiftfurniture.com/

正如您所看到的，在Firefox和IE（可能还有其他浏览器）上，当不需要时，会有一个水平滚动条。这肯定是导致它的Facebook按钮，因为当我评论它时，它们会消失。

我在按钮周围添加了一个固定宽度的div：溢出：隐藏应用，但似乎忽略了这一点。

我知道还有很多类似的问题，但是使用PrestaShop我真的不想过多地使用核心代码来让Facebook Like按钮工作（如果可能的话）。我希望有一个解决方案，将所有代码保存到我创建的“社交模块”中......即 - 只是一个文件，而不是弄乱PrestaShop的头文件等。

Answer 1

我已经使用Firebug对您的问题进行了一些调查，并且可以分享一些可能有用的观察结果。

有一些代码正在注入<div id="fb-root"></div>，而且内部样式宽度为575像素的iframe。

这就是导致滚动条的原因。

Answer 2

您可以添加“fb-like”属性data-width =“100px”

Answer 3

Facebook插入页面的标记可能会发生变化，因此您希望使用不依赖于它的解决方案。

您可以通过将fb-root div作为body元素的第一个子元素

来解决此问题

<body>
    <div id="fb-root"></div>

脚本标记和类似fb的div可以保留在原始位置。

参考：Facebook documentation和bug report

Answer 4

我有同样的问题......代码中有一个宽度（我认为默认值是450）。如果你把它改成150，我认为你会很好。当然，这取决于你在facebook插件上选择的偏好。

祝你好运，希望有所帮助。

Answer 5

后面有一个DIV

<div id="fb-root" class=" fb_reset">

<div style="position: absolute; top: -10000px; height: 0pt; width: 0pt;">

从此处移除绝对位置，水平滚动将消失之后它会显示一些内容说

Given URL is not permitted by the application configuration.

所以要么只是删除这个DIV或应用

display:none;让这个工作完美无缺

见此截图

enter image description here

有问题，看到有水平滚动
有解决方案，看到没有水平滚动但不需要圈内容。
将display none;应用于此div或删除此div 完全来自代码，将引导您解决方案

Answer 6

这里没有任何答案适合我，所以我自己尝试了。我找到了解决方案：

将以下CSS放入您的网站主管：

#fb-like-wrapper iframe {
    width:100px!important
}

将以下HTML放在要显示类似按钮的位置：

<div id="fb-like-wrapper">
    <div id="fb-root"></div>
    <div class="fb-like" data-href="http://www.facebook.com/yourAwesomesSite" 
    data-layout="button_count" data-action="like" 
    data-show-faces="false" data-share="false"></div
</div>

你去：）

Answer 7

将此添加到您的css

.fb-like{height:20px}

将属性data-width和data-height添加到

<div class="fb-like" data-width="124px" data-height="20px"></div>

如果不需要，也会阻止垂直滚动条出现。

Facebook喜欢按钮导致水平滚动条

7 个答案: