Css FBML,对连接可见,否则,额外空白

Css FBML,对连接可见,否则,额外空白,css,fbml,visibility,Css,Fbml,Visibility,在Facebook上,使用FBML box插件,您可以创建包含自定义代码的选项卡。你可以做的一件事是向不“喜欢”你的人隐藏内容,并在他们单击“喜欢”按钮后立即显示内容。这是通过以下代码完成的: <fb:visible-to-connection> <div class="fan">Content for fans</div> <fb:else> <div class="no-fan">Content for non-fans&l

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

<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的边距顶部设置为负值,这将使内容向上移动,从而隐藏空白。这通常效果很好。如果.fan的内容高度等于.no fan,它实际上可以完美地工作。就我而言,它们不是。My.fan内容较长,因此一旦他们“喜欢”我们,底部图像就会被切断(在.fan上)。它似乎做了相当于溢出:隐藏,采取的高度。没有风扇内容。当我强制设置.fan内容的高度时,所有内容都会显示出来,但是当你不是一个fan时,在.no fan内容上方会出现空白。我尝试过各种各样的填充、强迫高度的组合,但总是有不一致的地方

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

谢谢,
Ryan

我在类似facebook的框中遇到了同样的空白问题,但通过定义高度解决了这个问题。你试过了吗?

我在类似facebook的框中遇到同样的空白问题,但通过定义高度解决了这个问题。你试过了吗?

好的,又玩了一个小时,我发现了问题所在

假设我的粉丝内容是100px高,而我的非粉丝内容是75px高。当Facebook加载非粉丝内容时,它会在所有内容周围放置一个范围,其中
overflow:hidden
是内联样式属性之一。当您“喜欢”页面时,它会切换到风扇内容,但包含
溢出:隐藏的div的高度不会更新,这意味着我的风扇内容的25px会被切断

解决方案是强制非风扇内容的高度为100px,因此在切换为风扇的过程中,所有风扇内容都有显示的空间。不利的一面是,在非粉丝内容下面有一些额外的空间,但这超出了我希望访问者看到的内容。至少我的内容上面没有空白,而且我的所有内容都是100%可见的

这就是我找到的解决方案,如果有人有建议或我可以尝试的东西,我将感谢反馈


-Ryan

好的,在又玩了一个小时后,我发现了问题所在

假设我的粉丝内容是100px高,而我的非粉丝内容是75px高。当Facebook加载非粉丝内容时,它会在所有内容周围放置一个范围,其中
overflow:hidden
是内联样式属性之一。当您“喜欢”页面时,它会切换到风扇内容,但包含
溢出:隐藏的div的高度不会更新,这意味着我的风扇内容的25px会被切断

解决方案是强制非风扇内容的高度为100px,因此在切换为风扇的过程中,所有风扇内容都有显示的空间。不利的一面是,在非粉丝内容下面有一些额外的空间,但这超出了我希望访问者看到的内容。至少我的内容上面没有空白,而且我的所有内容都是100%可见的

这就是我找到的解决方案,如果有人有建议或我可以尝试的东西,我将感谢反馈


-Ryan

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

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

#包装纸{
宽度:520px;
边距:0自动;边框:0;填充:0;
位置:相对位置;
}
#非粉丝{
宽度:520px;
位置:绝对;顶部:0;左侧:0;
}

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

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

#包装纸{
宽度:520px;
边距:0自动;边框:0;填充:0;
位置:相对位置;
}
#非粉丝{
宽度:520px;
位置:绝对;顶部:0;左侧:0;
}

您在哪里定义了高度?我试着定义.fan的高度,但上面增加了空白。没有fan的div容器(当他们不“喜欢”我们时)。在facebook like框的脚本代码中有两个地方可以定义高度。你可以在那里改变高度,玩它,就像我认为我们谈论的是两件完全不同的事情一样你在哪里定义的高度?我试着定义.fan的高度,但上面增加了空白。没有fan的div容器(当他们不“喜欢”我们时)。在facebook like框的脚本代码中有两个地方可以定义高度。你可以在那里改变高度,玩它,就像我认为我们谈论的是两件完全不同的事情一样