FBML，连接可见，否则，额外的空白
在 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，另一种合乎逻辑的方法是什么？
谢谢， 瑞安
On Facebook, using the FBML box add-on, you can create a tab that contains custom code. One of the things you can do is hide content from people who don't "like" you and reveal content immediately once they click the "like" button. This is done via this code:
<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>
The problem is that Facebook applies a visibility:hidden to hidden content, which means the content is gone, but the white space remains. You can set margin-top of .no-fan to a negative value, which will move up the content, therefore hiding the white space. This generally works quite well. It actually works flawlessly if the height of the content of .fan is equal to .no-fan. In my case they aren't. My .fan content is longer and therefore once they "like" us, the bottom image gets cut off (on .fan). It seems to do the equivalent of overflow:hidden, taking the height of the .no-fan content. When I force the height of the .fan content, everything is revealed, but then when you are not a fan, there is white space above the .no-fan content. I've tried various combinations of applying padding, forcing heights, but there's always an inconsistency.
Has anyone had this problem? What have you done to solve it? Even if you've never worked with FBML, what would be another logical approach?
Thanks,
Ryan
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
您需要在顶部添加此代码：
You need to add this code on top:
我在类似 facebook 的框中也遇到了同样的空白问题，但通过定义高度解决了这个问题。你试过了吗？
I had this same white space issue in the facebook like box but it was solved by defining height. did u tried that?
好吧，又玩了一个小时后，我弄清楚了问题所在。
假设我的粉丝内容高 100 像素，非粉丝内容高 75 像素。当 Facebook 加载非粉丝内容时，它会在所有内容周围放置一个跨度，其中
overflow:hidden是内联样式属性之一。当您“喜欢”该页面时，它会切换到粉丝内容，但包含overflow:hidden的 div 的高度不会更新，这意味着我的粉丝内容的 25px 被截掉。解决方案是强制非粉丝内容的高度为100px，这样在转换为粉丝期间，所有粉丝内容都有空间显示。缺点是非粉丝内容下方有一些额外的空间，但这超出了我希望访问者看到的内容。至少我的内容上方没有空白，并且我的所有内容 100% 都可见。
这就是我找到的解决方案，如果有人有建议或我可以尝试的东西，我将不胜感激。
-瑞安
OK, after another hour of playing with this, I figured out what the problem is.
Let's say my fan content is 100px tall and my non-fan content is 75px tall. When Facebook loads the non-fan content, it places a span around all of it, with
overflow: hiddenbeing one of the inline style attributes. When you "like" the page, it switches over to the fan content, but the height of the div containingoverflow: hiddenisn't updated, which means 25px of my fan content gets cut off.The solution was to force the non-fan content to be 100px in height, so during the switch to becoming a fan, all the fan content would have room to be displayed. The down side is that there's some extra space below the non-fan content, but it's beyond the content I care for visitors to see. At least there's no white space above my content and all of my content is visible 100% of the time.
That's the solution I found, if anyone has recommendations or something I can try, I'd appreciate feedback.
-Ryan