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应用了一个可见性：对隐藏内容隐藏，这意味着内容已经消失，但空白区仍然存在。您可以将.no-fan的margin-top设置为负值，这将向上移动内容，从而隐藏空白区域。这通常很有效。它实际上完美无缺如果 .fan的内容高度等于.no-fan。在我看来，他们不是。我的.fan内容更长，因此一旦他们“喜欢”我们，底部图像就会被切断（在.fan上）。它似乎相当于overflow：hidden，取得.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>

Answer 2

我在facebook喜欢的盒子里有同样的空格问题，但它是通过定义高度来解决的。你试过那个吗？

Answer 3

好的，经过一个小时的玩这个，我发现了问题所在。

假设我的粉丝内容高100像素，我的非粉丝内容高75像素。当Facebook加载非粉丝内容时，它会围绕所有内容放置一个范围，overflow: hidden是内联样式属性之一。当您“喜欢”该页面时，它会切换到粉丝内容，但不会更新包含overflow: hidden的div的高度，这意味着我的粉丝内容的25px会被切断。

解决方案是强制非风扇内容的高度为100px，因此在切换成风扇时，所有风扇内容都有空间显示。缺点是非粉丝内容下面有一些额外的空间，但它超出了我关心访问者看到的内容。至少在我的内容之上没有空白区域，我的所有内容在100％的时间都可见。

这是我找到的解决方案，如果有人有建议或我可以尝试的东西，我会很感激反馈。

-Ryan

FBML，可见连接，否则，额外的空白区域

3 个答案: