3

我将 Facebook 登录添加到我的一个网站。但是，在 Facebook 按钮从文本切换到实际的 fb-login-button 之前，我的网站的高度大于应有的高度，并且一旦 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，但我真的很想使用它，所以我不明白为什么它在显示正确的配色方案之前会上下跳跃。

4

2 回答 2

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;
}
于 2012-10-01T14:56:30.110 回答
0

基于 Yohann 的回答，我发现“溢出”和“显示”（带有 !important）是必不可少的。下面的代码对我有用。没有按钮的跳跃，也没有它下面的内容。

.fb-login-button-no-jump {
    width: 123px;
    height: 39px;
    overflow: hidden;
    display: block !important;
}
于 2016-08-28T10:35:21.480 回答