Facebook Like 按钮导致水平滚动条
Posted
技术标签:
【中文标题】Facebook Like 按钮导致水平滚动条【英文标题】:Facebook Like Button Causing Horizontal Scrollbar 【发布时间】:2012-04-06 05:15:29 【问题描述】:我最近在我的网站上添加了一个类似 facebook 的按钮,它会导致在不需要时出现水平滚动条。它不会出现在 Chrome 中,但会出现在 Firefox 和 IE 中。
我在 Firebug 中检查了创建的代码,看不出哪里出了问题。
这是该网站的链接,您可以查看:http://www.swiftfurniture.com/
如您所见,在 Firefox 和 IE(可能还有其他浏览器)上,不需要时有一个水平滚动条。这绝对是 Facebook 的点赞按钮造成的,因为当我将其注释掉时,它们就会消失。
我在按钮周围添加了一个固定宽度的 div,并应用了溢出:隐藏,但它似乎忽略了这一点。
我知道还有很多其他类似的问题,但是使用 PrestaShop 我真的不想为了让 Facebook Like 按钮工作(如果可能的话)而过多地弄乱核心代码。我希望有一种解决方案可以将所有代码包含在我创建的“社交模块”中......即 - 只是一个文件,而不是与 PrestaShop 的头文件等混在一起。
【问题讨论】:
【参考方案1】:我已经用 Firebug 调查了您的问题,并可以分享一些可能有用的观察结果。
有代码被注入到您的<div id="fb-root"></div>
中,其中包含一个内联样式宽度为 575 像素的 iframe。
这就是导致滚动条的原因。
【讨论】:
不知道我是怎么错过的,我知道一定是有什么东西使它变宽了,但没有发现。嗬!我添加了:.FB_UI_Hidden width: 100px !important;
作为 CSS 样式,它解决了这个问题。谢谢【参考方案2】:
可以在“fb-like”属性中添加data-
【讨论】:
这是正确的解决方案。我喜欢的小部件在加载时不再跳转到大宽度。 在此页面上列出的各种解决方案中,这是唯一对我有效的解决方案。症状是 FB 按钮加载时水平滚动条闪烁(然后消失)。【参考方案3】:Facebook 插入您页面的标记可能会发生变化,因此您希望使用不依赖它的解决方案。
您可以通过将 fb-root div 作为 body 元素的第一个子元素来解决此问题
<body>
<div id="fb-root"></div>
脚本标签和类似fb的div可以保留在原来的位置。
参考:Facebook documentation 和 bug report
【讨论】:
我有#fb-root
作为第一个子 div,但我仍然看到问题。【参考方案4】:
我遇到了同样的问题...代码中有一个宽度(我认为默认值为 450)。如果您将其更改为 150 左右,我认为您的状态会很好。当然,这取决于您在 facebook 插件上选择的偏好。
祝你好运,希望对你有所帮助。
【讨论】:
【参考方案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;
让它完美运行
看这个截图
-
有问题看到有水平滚动
有解决方案看到没有水平滚动但不需要
圈子里的内容。
将
display none;
应用于此 div 或删除此 div
完全来自代码,将引导您找到解决方案
【讨论】:
据我所知,我无法更改任何代码?它是由 Facebook 注入的。【参考方案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>
你去吧:)
【讨论】:
【参考方案7】:将此添加到您的 css 中
.fb-likeheight:20px
添加属性 data-width 和 data-height 到
<div class="fb-like" data- data-></div>
这也可以防止垂直滚动条在不需要时出现。
【讨论】:
以上是关于Facebook Like 按钮导致水平滚动条的主要内容,如果未能解决你的问题,请参考以下文章
[TimLinux] JavaScript position为fixed时支持水平滚动条