facebook-graph-api - fb-login-button使页面上下跳转，直到加载为止

Question

我在我的一个网站上添加了Facebook登录名。但是，在Facebook按钮从文本切换到实际的fb-login按钮之前，我的网站的高度大于应有的高度，并且一旦出现facebook按钮，它就会恢复正常。有谁知道那是为什么？我应该修改什么吗？这是它的代码:

<div class="fb-login-button" style="float: left; overflow:hidden;" size="large" scope="user_about_me, email">Use Facebook Account to Login</div>

我认为这是由于xfbml引起的，但我真的很想使用它，因此我不明白为什么它在显示正确的配色方案之前会上下跳跃。

Answer 1

您可以在CSS中添加一个max-height:50px或接近该值的值。
这将迫使fb按钮不展开并暂时增加高度以加载iframe。

您可以尝试如下操作:
HTML

<div class="fb-login-button fb-no-jump" size="large" scope="user_about_me, email">
Use Facebook Account to Login</div>

还有 CSS :

.fb-no-jump {
    display:block;
    max-height:50px /*change as per requirement*/
    overflow:hidden;
}