关于html:Facebook Like 按钮导致水平滚动条

Facebook Like Button Causing Horizontal Scrollbar

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

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

这是该网站的链接,您可以查看:http://www.swiftfurniture.com/

如您所见,在 Firefox 和 IE(可能还有其他浏览器)上,不需要水平滚动条。这绝对是 Facebook 的点赞按钮造成的,因为当我将其注释掉时,它们就会消失。

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

我知道还有很多其他类似的问题,但是使用 PrestaShop 我真的不想为了让 Facebook Like 按钮工作(如果可能的话)而过多地弄乱核心代码。我希望找到一种解决方案来将所有代码包含在我创建的"社交模块"中......即 - 只是一个文件,而不是与 PrestaShop 的头文件等混在一起。


您可以在"fb-like"属性中添加data-width="100px"


我已经用 Firebug 调查了您的问题,可以分享一些可能有用的观察结果。

有代码被注入到您的 中,其中包含一个内联样式宽度为 575px 的 iframe。

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


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

您可以通过将 fb-root div 作为 body 元素的第一个子元素来解决此问题

1
<body>

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

参考:Facebook 文档和错误报告


将此添加到您的 css

1
.fb-like{height:20px}

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

1
 

这也可以防止垂直滚动条在不需要时出现。


这里没有一个答案对我有用,所以我自己尝试了一下。我找到了解决方案:

将以下 CSS 放入您的网站头部:

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

把下面的 HTML 放在你想显示喜欢按钮的地方:

1
2
3
    <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

1
 

从这里删除绝对位置,水平滚动将消失
之后它会显示一些内容说

Given URL is not permitted by the application configuration.

所以要么删除这个 DIV,要么应用

display:none; 让它完美地工作

看这个截图

enter image description here

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

  • 我遇到了同样的问题...代码中有一个宽度(我认为默认值为 450)。如果您将其更改为 150 左右,我认为您的状态会很好。当然,这取决于您在 facebook 插件上选择的偏好。

    祝你好运,希望对你有所帮助。