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

时间:2011-09-09 18:56:56

标签: css facebook facebook-like

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

它看起来很好,但有些东西神秘地导致类似按钮超宽并迫使浏览器进行水平页面滚动,即使整个类似按钮在页面内。

实施例: [删除示例] - 请参阅侧栏。我必须将整个BODY设置为忽略overflow-x。如果没有,那么类似按钮会在那里产生大量的额外像素(但我无法用Firebug看到它们)。我知道这是问题,因为如果我删除它,那么它看起来很好。

示例2: Screenshot of Example - 在标题中,我不得不向左移动边距,我希望它位于右上角。在firebug中使用CSS for fbheader,你会看到。

我在那里使用的代码:

<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的一个错误。

7 个答案:

答案 0 :(得分:5)

我遇到了同样的问题,但上述建议都没有对我有用。 我找到了其他可行的解决方案,请参阅http://britishinside.com/archive/2011/07/07/Facebook-Like-Button-Bug.aspx

只需在样式表中加入:

#fb-root > div { left:0 } 

答案 1 :(得分:2)

这是facebook的一个错误。为什么不按如下方式更新您的fbheader类:

.fbheader {
  overflow:hidden;
}

那应该解决你的问题..

祝你好运..

答案 2 :(得分:1)

我遇到了同样的问题。我发现问题与Facebook的重置div中的错误有关。我这样修好了:

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

答案 3 :(得分:1)

我使用#fb-root { display: none; }

解决了问题

答案 4 :(得分:0)

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

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

另一个提示是重新定位按钮,或将边距和填充设置为窄。

答案 5 :(得分:0)

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

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

跳过溢出规则也会起作用

答案 6 :(得分:0)

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