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中添加最大高度：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;
}

Answer 2

在Yohann的回答基础上，我发现“溢出”和“显示”（带有！重要）是必不可少的。 下面的代码适合我。没有跳按钮或下面的内容。

.fb-login-button-no-jump {
    width: 123px;
    height: 39px;
    overflow: hidden;
    display: block !important;
}