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”
- 这是正确的解决方案。我喜欢的小部件在加载时不再跳转到大宽度。
- 在此页面上列出的各种解决方案中，这是唯一对我有用的解决方案。症状是 FB 按钮加载时水平滚动条闪烁(然后消失)。
我已经用 Firebug 调查了您的问题，可以分享一些可能有用的观察结果。
有代码被注入到您的 中，其中包含一个内联样式宽度为 575px 的 iframe。
这就是导致滚动条的原因。
- 不知道我是怎么错过的，我知道一定是有什么东西使它变宽了，但找不到它。嗬！我补充说： .FB_UI_Hidden { \twidth: 100px !important; } 作为一种 css 样式，它解决了这个问题。谢谢
Facebook 插入您页面的标记可能会发生变化，因此您希望使用不依赖它的解决方案。
您可以通过将 fb-root div 作为 body 元素的第一个子元素来解决此问题
|
1
|
<body>
|
脚本标签和类似fb的div可以保留在原来的位置。
参考：Facebook 文档和错误报告
- 我有 #fb-root 作为第一个子 div，我仍然看到问题。
将此添加到您的 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; 让它完美地工作
看这个截图
圈子里的内容。
完全来自代码，将引导您找到解决方案
- 据我所知，我无法更改任何代码？它是由 Facebook 注入的。
我遇到了同样的问题…代码中有一个宽度(我认为默认值为 450)。如果您将其更改为 150 左右，我认为您的状态会很好。当然，这取决于您在 facebook 插件上选择的偏好。
祝你好运，希望对你有所帮助。
来源：https://www.codenong.com/9808808/
