点赞按钮宽度不起作用 - 导致浏览器水平滚动

发布于 2024-12-03 23:55:47 字数 1106 浏览 2 评论 0原文

我有两个实例,其中 Like 按钮没有“监听”我在 XFBML 代码中指定的宽度。

看起来不错,但有些东西神秘地导致“喜欢”按钮超宽,并强制浏览器进行水平页面滚动,即使整个“喜欢”按钮都在页面内。

例子: [示例已删除] - 请参阅侧边栏。我必须将整个 BODY 设置为忽略溢出 x。如果没有,“like”按钮会导致大量额外像素(但我无法使用 Firebug 看到它们)。我知道这是问题所在,因为如果我删除它,它看起来就很好。

示例2: 示例屏幕截图 - 在标题中,我必须将边距向左移动这么远,我希望它位于右上角。在 firebug 中使用 fbheader 的 CSS,您就会看到。

我在那里使用的代码:

<div class="fbheader">
<div id="fb-root"></div>
<script>
 window.fbAsyncInit = function() {
 FB.init({appId: 'your app id', status: true, cookie: true,
         xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
  '//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());

 <fb:like href="http://www.example.com" send="true" width="300" show_faces="false" font="arial" colorscheme="dark"></fb:like>
</div> <!--// End fbheader -->

有什么想法为什么会发生这种情况吗?有人可以帮忙吗?这似乎是 XFBML 的一个错误。

I have two instances of where the Like Button is not "listening" to the width I specify in the XFBML code.

It LOOKS fine, but something is mysteriously causing the like button to be extra wide and force the browser to do horizontal page scrolling even though the entire like button is within the page.

Example:
[EXAMPLE REMOVED] - see the sidebar. I have to set the entire BODY to ignore overflow-x. If not, the like button causes a ton of extra pixels out there (but I can't see them with Firebug). I know this is the problem because if I remove it, then it looks fine.

Example 2:
Screenshot of Example - In the header, I had to move the margin over so far to the left, and I wanted it to be in the top-right corner. Play with the CSS for fbheader in firebug and you'll see.

The code I'm using there:

<div class="fbheader">
<div id="fb-root"></div>
<script>
 window.fbAsyncInit = function() {
 FB.init({appId: 'your app id', status: true, cookie: true,
         xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
  '//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());

 <fb:like href="http://www.example.com" send="true" width="300" show_faces="false" font="arial" colorscheme="dark"></fb:like>
</div> <!--// End fbheader -->

Any ideas why this is happening?? Can anyone help? It seems like a bug with the XFBML.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(7

一页 2024-12-10 23:55:48

我刚刚遇到了同样的问题,使用 facebook 的 iFrame 脚本作为双“分享”和“喜欢”按钮。我没有指定宽度(以像素为单位)。通过获取替换脚本修复了此问题,但此类型在提供的框中指定了 120 像素的宽度。

I've just had the same problem, using an iFrame script from facebook for a double "share" and "like" button. I hadn't specified a width in pixels. Fixed it by getting a replacement script, but this type specifying a width of 120 pixels in the box provided.

束缚m 2024-12-10 23:55:47

我遇到了同样的问题,但上述建议都不适合我。
我找到了另一个有效的解决方案,请参阅 http:// /britishinside.com/archive/2011/07/07/Facebook-Like-Button-Bug.aspx

只需将其包含在您的样式表中:

#fb-root > div { left:0 } 

I had the same problem, but none of the suggestions above worked for me.
I found another solutions that did work, see http://britishinside.com/archive/2011/07/07/Facebook-Like-Button-Bug.aspx

Simply include this in your stylesheet:

#fb-root > div { left:0 } 
浮生面具三千个 2024-12-10 23:55:47

这是 Facebook 的一个错误。为什么你不直接更新你的 fbheader 类,如下所示:

.fbheader {
  overflow:hidden;
}

这应该可以解决你的问题..

祝你好运..

It's a bug with facebook. Why don't you just update your fbheader class as follows:

.fbheader {
  overflow:hidden;
}

That should solve your issue ..

Good luck..

站稳脚跟 2024-12-10 23:55:47

我也有同样的问题。我发现问题与 Facebook 重置 div 中的错误有关。我是这样修复的:

#fb_like .fb_reset {
    /* fix for Facebook bug which causes horizontal scrollbars in browser */
    display: none;
}

I had the same problem. I found the problem was to do with a bug in Facebook's reset div. I fixed it like this:

#fb_like .fb_reset {
    /* fix for Facebook bug which causes horizontal scrollbars in browser */
    display: none;
}
我爱人 2024-12-10 23:55:47

我使用 #fb-root { display: none; 修复了该问题}

I fixed the issue using #fb-root { display: none; }

尐籹人 2024-12-10 23:55:47

您可以尝试更改 css 文件中 fbheader 类的宽度,甚至更好的是父元素。

有时,当我们使用导致父级变宽的内部元素时,水平滚动就会变得可见。

另一个技巧是重新定位按钮,或将边距和内边距设置得较窄。

You could try alter the width of fbheader class in css file, or even better, the parent element.

Sometimes when we use internal elements that cause the parent to get wider, the horizontal scroll get visible.

Another tip is to reposition the button, or set the margins and padding narrow.

冷清清 2024-12-10 23:55:47

我的解决方案是将其应用于父容器:

.my-parent-wrapper {
    display: inline-block; 
    overflow: hidden;
}

跳过溢出规则也将起作用

My solution is to apply this to the parent container:

.my-parent-wrapper {
    display: inline-block; 
    overflow: hidden;
}

skipping overflow rule will work too

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文