Facebook Like按钮导致水平滚动条

我最近添加了一个Facebook按钮到我的网站，它导致一个水平滚动条出现时，它不需要。它没有出现在Chrome中，但是在Firefox和IE中。Facebook Like按钮导致水平滚动条

我检查了在Firebug中创建的代码，看不到发生了什么问题。

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

正如你可以看到，在Firefox和IE浏览器（可能是其他浏览器也是如此），有没有需要时水平滚动条。这绝对是Facebook的按钮造成的，因为当我发表评论时，它们消失了。

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

我知道还有很多其他类似的问题，但是使用PrestaShop我并不是真的想为了得到一个Facebook Like按钮而工作（如果可能的话）太多的核心代码。我希望有一个解决方案，将所有包含在我创建的“社交模块”中的代码保留下来......即只是一个文件，而不是搞乱PrestaShop的头文件等。

来源

2012-03-21 BT643

我看着你的问题有点Firebug的，可以分享一些看法，可能是很有帮助。

有代码被注入到您的<div id="fb-root"></div>中，其中有一个iframe，其内嵌样式宽度为575px。

这是什么导致滚动条。

来源

2012-03-21 17:19:36 redlena

不知道我错过了什么，我知道必须有一些东西让它变宽，但不能发现它。卫生署！我补充说：'.FB_UI_Hidden { \t width：100px！important; }'作为一种CSS风格，它解决了这个问题。谢谢 – BT643 2012-03-21 17:33:47

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

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

来源

2012-03-21 17:14:24 NotJay

有一个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 从代码，将带领您到解决方案

来源

2012-03-21 17:17:47 Jack

尽管据我所知，我无法更改任何代码？它由Facebook注入。 – BT643 2012-03-21 17:33:16

Facebook插入到您的页面的标记可能会更改，因此您希望使用不依赖于其的解决方案。

您可以通过将FB-根格，你的身体元素

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

脚本标签和FB-像div的第一个孩子可以留在原来的地方解决这个问题。

编号：Facebook documentation和bug report

来源

2012-04-17 07:21:38 scarba05

我有'＃fb-root'作为第一个子div，而且我仍然看到这个问题。 – emptywalls 2014-02-14 23:59:01

您可以添加到“FB状”属性数据宽度=“100px的”

来源

2014-02-12 10:29:48 user2722034

这是正确的解决方案。加载时，我喜欢的小部件不再跳到很大的宽度。 – 2014-02-26 04:13:54

在本页面列出的各种解决方案中，这是唯一真正为我工作的人。症状是当FB按钮加载（然后消失）时，水平滚动条闪烁。 – medmunds 2014-04-06 15:09:43

的答案都不对，我在这里工作，所以我没有尝试过自己。我发现了一个解决方案：

认沽下面的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>

你去那里:)

来源

2014-02-16 00:11:10 Karl

将此项添加到您的css

.fb-like{height:20px}

添加属性数据宽度和数据高度

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

这也防止垂直滚动条从如果不需要它出现。

来源

2014-07-06 17:01:12

Facebook Like按钮导致水平滚动条

回答

相关问题