Question

我很清楚这个问题差不多有10个重复。但是没有一个解决方案适合我。所以这里有详细信息：

我在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的{{1}}内所有类似Facebook的按钮都设置为display:none，width设置为height。

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

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

以下是隐藏div中的按钮代码：

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

Answer 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');
    });}

Answer 2

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

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

Answer 3

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

像魅力一样为我工作

Answer 4

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

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

Facebook就像按钮没有在div中呈现而显示：无

4 个答案: