Facebook like 按钮未在显示的 div 中呈现：无答案

【问题标题】：Facebook like button not rendering in div with display:noneFacebook like 按钮未在显示的 div 中呈现：无
【发布时间】：2015-01-17 20:01:46
【问题描述】：

我很清楚这个问题几乎有 10 个重复。但是他们的解决方案都不适合我。所以这里是细节：

我正在使用引导程序中的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 生成的 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 有 display:none 时如何使其可见？

【问题讨论】：

标签： facebook facebook-like

【解决方案1】：

我遇到了与您完全相同的问题，我的代码解决方案如下。需要注意的关键是，每当您看到 facebook 生成的代码的高度和宽度为 0 时，这意味着 facebook 按钮已加载，而其上的 CSS 为 display: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');
    });}

【讨论】：

【解决方案2】：

如果您将div 设置为display:none;，默认情况下所有子对象都将具有display:none，这意味着它们不会出现。如果将大小设置为零，则相同。

恕我直言，这不是正确的做法，但请尝试将子对象设置为 display: block; 或 display: inline; 并为其指定大小。

【讨论】：

【解决方案3】：

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

像魅力一样为我工作

【讨论】：

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

【解决方案4】：

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

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

【讨论】：