css - FBML，连接可见，否则，额外的空白

Question

在 Facebook 上，使用 FBML 框插件，您可以创建一个包含自定义代码的选项卡。您可以做的一件事是对不“喜欢”您的人隐藏内容，并在他们单击“喜欢”按钮后立即显示内容。这是通过以下代码完成的:

<fb:visible-to-connection>
  <div class="fan">Content for fans</div>
<fb:else>
  <div class="no-fan">Content for non-fans</div>
</fb:else>
</fb:visible-to-connection>

问题是 Facebook 对隐藏内容应用了 visibility:hidden，这意味着内容消失了，但空白区域仍然存在。您可以将 .no-fan 的 margin-top 设置为负值，这将向上移动内容，从而隐藏空白。这通常效果很好。 如果 .fan 的内容高度等于 .no-fan，它实际上可以完美地工作。就我而言，他们不是。我的 .fan 内容更长，因此一旦他们“喜欢”我们，底部图像就会被截断(在 .fan 上)。它似乎相当于溢出:隐藏，占用 .no-fan 内容的高度。当我强制 .fan 内容的高度时，一切都会显示出来，但是当你不是粉丝时，.no-fan 内容上方会有空白。我尝试了应用填充、强制高度的各种组合，但始终存在不一致。

有人遇到过这个问题吗？你做了什么来解决它？即使您从未使用过 FBML，另一种合乎逻辑的方法是什么？

谢谢，瑞安

Answer 1

您需要在顶部添加此代码:

<style>
#wrapper {
width:520px;
margin:0 auto; border:0; padding:0;
position:relative;
}
#non-fans {
width:520px;
position:absolute; top:0; left:0;
}
</style>