3

我很清楚这个问题几乎有 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都已设置为.widthheight0

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

我正在使用使用FB like button configurator生成的 HTML5 版本的 like button 。

下面是隐藏 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 时如何使其可见？

4

4 回答 4

2

我遇到了与您完全相同的问题，我的代码解决方案如下。需要注意的关键是，每当您看到 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');
    });}
于 2014-05-06T19:53:30.380 回答
1

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

.fb-like.fb_iframe_widget iframe{
  width:60px !important;
  height:60px !important;                                
}
于 2015-01-17T12:01:46.210 回答
1

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

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

于 2013-07-12T06:14:54.213 回答
1

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

像魅力一样为我工作

于 2014-08-27T22:25:01.473 回答