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？

來源

2013-07-12 md1hunox

如果默認設置一個div到display:none;所有子對象將有display:none，這意味着他們不會露面。如果將大小設置爲零，則相同。

恕我直言，這不是正確的做法，但嘗試設置子對象爲display: block;或display: inline;並給它一個定義的大小。

來源

2013-07-12 06:14:54 Michael

我有你完全相同的問題，我的代碼解決方案如下。關鍵要注意的是，只要您看到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'); 
    });}

來源

2014-05-06 19:53:30 stewsha

在任何隱藏的內容中放入iframe版本的Like按鈕，它將起作用。

工作對我來說就像一個魅力

來源

2014-08-27 22:25:01

你能詳細說明一下嗎？和/或添加一些示例代碼？ – kostas

我有類似的問題，但只有在IE瀏覽器。我看到iframe的寬度和高度都保持爲0.這就解決了我的問題：

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

來源

2015-01-17 12:01:46 JohnyFree

Facebook的按鈕不顯示與div顯示：無

回答

相關問題