Facebook的按钮不显示与div显示：无

问题描述：

我很清楚，这个问题几乎有10个重复。但他们都不适合我。所以这里是详细信息：Facebook的按钮不显示与div显示：无

我从bootstrap使用carousel。我使用carousel在每个周期显示一组3个div。的结构如下：

<div id="myCarousel" class="carousel slide"> 
    <div class="carousel-inner"> 
     <div class="active item"> 
      <div class="span4>content along with FB like button </div> 
      <div class="span4>content along with FB like button </div> 
      <div class="span4>content along with FB like button </div> 
     </div> 

     <div class="item"> <!-- this div has display:none --> 
     <div class="span4>content along with FB like button </div> 
     <div class="span4>content along with FB like button </div> 
     <div class="span4>content along with FB like button </div> 
     </div> 
    </div> 

    <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a> 
    <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a> 
    </div>

以上是精简版，刚刚离开了不必要的东西。问题是，div中的所有Facebook按钮（其中display:none已设置width和height设置为0）都是如此。

在Firefox（最新版本）中会出现此问题。

我使用的是使用FB like button configurator生成的like按钮的HTML5版本。

下面是在隐藏的div像按钮的代码所得到的：

<div data-show-faces="true" data-width="450" layout="box_count" data-send="false" class="fb-like fb_edge_widget_with_comment fb_iframe_widget" fb-xfbml-state="rendered"> 
    <span style="height: 0px; width: 0px;"> 

     <iframe scrolling="no" style=" height: 0px; width: 0px; class="fb_ltr fb_iframe_widget_lift" src=""> 
     </iframe> 

    </span> 
</div>

在活性的div等按钮是唯一可见的。即使那些在模态中（最初隐藏的）也不可见。如何让div在显示时可见：none？

答

如果默认设置一个div到display:none;所有子对象将有display:none，这意味着他们不会露面。如果将大小设置为零，则相同。

恕我直言，这不是正确的做法，但尝试设置子对象为display: block;或display: inline;并给它一个定义的大小。

答

我有你完全相同的问题，我的代码解决方案如下。关键要注意的是，只要您看到facebook生成的代码的高度和宽度都为0，就意味着facebook按钮被加载，而CSS上显示为：none。您不能只强制显示它，因为在引导程序传送带加载完成时，facebook按钮可能尚未完全加载。诀窍是在初始加载时使用active在转盘上显示所有物品，然后一旦您的Facebook按钮已加载，您可以从非启动幻灯片中删除active。

<div id="myCarousel" class="carousel slide"> 
<div class="carousel-inner"> 
    <div class="active item"> 
     <div class="span4>content along with FB like button </div> 
     <div class="span4>content along with FB like button </div> 
     <div class="span4>content along with FB like button </div> 
    </div> 

    <div class="active item"> <!-- this div also is active for initial load --> 
    <div class="span4>content along with FB like button </div> 
    <div class="span4>content along with FB like button </div> 
    <div class="span4>content along with FB like button </div> 
    </div> 
</div> 

<a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a> 
<a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a> 
</div> 



window.fbAsyncInit = function() { 
    FB.Event.subscribe('xfbml.render', function() { 
$('.carousel-inner>.item:not(:first-child)').removeClass('active'); 
    });}

答

在任何隐藏的内容中放入iframe版本的Like按钮，它将起作用。

工作对我来说就像一个魅力

你能详细说明一下吗？和/或添加一些示例代码？ – kostas

答

我有类似的问题，但只有在IE浏览器。我看到iframe的宽度和高度都保持为0.这就解决了我的问题：

.fb-like.fb_iframe_widget iframe{ 
    width:60px !important; 
    height:60px !important;         
}

Facebook的按钮不显示与div显示：无

相关推荐