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

Question

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

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

示例:[删除示例] - 请参阅侧栏.我必须设置整个BODY以忽略overflow-x.如果没有,那么类似按钮会在那里产生大量的额外像素(但我无法用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的一个错误.

Answer 1

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

只需在样式表中包含这个:

#fb-root > div { left:0 }