Question

我有点困惑这个。我有一个文章列表，其中包含链接到完整文章的片段。当您将鼠标悬停在每个模糊区域上时，会在包含社交分享按钮（FB，Twitter＆amp; G + 1）的模糊区域底部显示一个条形。

http://jsfiddle.net/6Ukmb/

请注意，在jsfiddle示例中已经删除了格式，并且G + 1不起作用 - 对此问题并不重要。

我的问题是FB like按钮无法正确加载。在Chrome中，一切都按预期工作。在FF或IE中，FB按钮加载“隐藏”，我无法让它们出现。

如果页面仍在加载时，鼠标悬停在其中一个文章按钮上，则该文章的FB按钮可以正常加载。如果在FB完成加载时隐藏悬停效果，则不会出现爱情或金钱。

我已将其拆开并发现如果我从display: none;移除css content-box .story-hover，则会加载正常。当然，这也意味着隐藏的面板加载可见，直到有人将鼠标悬停在它们上面隐藏，这将无效。

我无法弄清楚如何解决这个问题。此外，由于FB类按钮的数量，我的开发构建速度稍慢，因此将display:none延迟到页面加载结束也不会有效。

Answer 1

我使用的另一种方法是在显示容器之前不渲染类似fb的按钮，这可以通过使用

来实现

window.fbAsyncInit = function () {
    FB.init({
        xfbml:false  // Will stop the fb like button from rendering automatically
    });
};

然后要渲染类似按钮，您可以使用

FB.XFBML.parse(); // This will render all tags on the page

或以下是关于如何在元素中呈现所有XFBML的Jquery示例

FB.XFBML.parse($('#step2')[0]);

或普通javascript

FB.XFBML.parse(document.getElementById("step2"));

Answer 2

在这里使用CSS opacity是一个不错的选择......像这样基本的东西：

HTML

<div class="div">
  <div class="social"></div>
</div>

CSS

.div {
     opacity: 0;
     filter:alpha(opacity=0);
     }
.div:hover .social {
     opacity: 1.0;
     filter:alpha(opacity=100);
     }

从那里你可以添加过渡以使它看起来很棒！

Answer 3

我们遇到了同样的问题并通过使用CSS将包含div的初始宽度和高度设置为零来解决它，然后，当激活触发器时，使用jQuery：

将不透明度设置为零（在展开时隐藏div）
设置宽度和高度（展开div）
将不透明度设置为1（淡入div）

淡出时，无需将宽度和高度重置为零。在将不透明度设置为零后，只需设置为display：none。现在Facebook按钮已加载并且已设置其尺寸，它不会改变。

Answer 4

不透明度方法有效，但按钮在页面上是实时的，只是不可见。

因此，如果您的不透明度为0的div与您需要点击的其他任何内容重叠，则会偶然点击隐藏的按钮。

我希望这种方法有效，遗憾的是我的网站并不是因为这个。

Answer 5

使用此CSS：

.fb_iframe_widget span,
iframe.fb_iframe_widget_lift,
.fb_iframe_widget iframe {
    width:80px !important;
    height:20px !important;
    position:relative;
}

背后的技术：使用“！important”

用CSS覆盖来自facebook的数据

Answer 6

这不是答案，这是评论！希望我会回来继续努力并将其转化为答案。

处理同样的问题。 Firefox +隐藏容器。唯一的区别是我使用onclick slideDown / slideUp取消隐藏/隐藏，但我认为这是无关紧要的。

剥离，我的HTML看起来像这样：

<div id="fb_like_button" class="hide">
   <div class="fb-like" data-action="recommend" ...></div>
</div>

我注意到隐藏和未隐藏容器之间的区别，即从div＃fb_like_button移除我的'hide'类，facebook放置在div.fb-中的<span>和<iframe>比如改变样式属性的宽度和高度。

因此，当呈现页面时（再次，严重剥离html）

取消隐藏：

<div id="fb_like_button" class="">
   <div class="fb-like" data-action="recommend" ...>
     <span style="height: 61px; width: 97px;">
       <iframe style="height: 61px; width: 97px;">

隐藏的：

<div id="fb_like_button" class="hide">
  <div class="fb-like" data-action="recommend" ...>
    <span style="height: 0px; width: 0px;">
      <iframe style="height: 0px; width: 0px;">

在完成渲染后使用firefox开发人员工具播放宽度和高度样式允许我将类似按钮破解回可见。

还没有解决方案，但随着我找到更多信息，我会不断更新。我将非常努力地不添加额外的javascript来设置这些样式属性，而是解码wtf facebook正在做的事情。希望这有助于某人。

Answer 7

不要设置display：none，而是尝试使用margin-top或z-index隐藏它。这两个都不会破坏FB之类的按钮。

.hide2 {
   margin-top: -1000px !important;
   position: relative ;
   z-index: -1 !important;
}

Answer 8

每个浏览器在jsfiddle上的工作方式不同。如果您尝试在可以制作的测试html文件上加载代码。它可能仍然有效。只是不在js小提琴..有时jquery不会覆盖css文件或标签中的css代码..因此，如果它这样做。它可能被卡住了。

当我在计算机/浏览器上处理我的小提琴时，我已经看到它是随机发生的。

Answer 9

将不透明度设置为0对我来说不是一个解决方案，因为它隐藏并重叠您需要点击的任何内容，而jquery fadein函数使用css显示属性而不是不透明度。

所以我想出的解决方案是将容器显示为块但不在窗口左边：-9999px，然后我设置一个定时器1s~2s（所有社交按钮渲染所需的时间）并更改显示为无并返回原始位置：

#bnts_container
{
  left:-9999px;
  display:block;
}

$(window).load(function () {

  setTimeout(function () {
     $('#bnts_container').css("display", "none");
     $('#bnts_container').css("left", "50%");
    } , 2000);

});

单击+共享按钮here以测试此解决方案。

Answer 10

我更喜欢在容器中将其设为绝对

  iframe{
     position: absolute !important;
     height: 500px !important;
  }

Facebook Like按钮在加载隐藏时不显示

10 个答案: