28

我有点坚持这个。我有一个文章列表，其中包含链接到整篇文章的片段。当您将鼠标悬停在每个简介上时，简介底部会出现一个包含社交分享按钮（FB、Twitter 和 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直到页面加载结束也不起作用。

4

10 回答 10

21

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

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

然后渲染你可以使用的like按钮

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"));
于 2012-12-03T01:25:43.440 回答
10

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

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

从那里您可以添加过渡以使其看起来不错！

于 2012-09-08T18:57:49.980 回答
7

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

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

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

于 2012-11-20T22:04:55.260 回答
5

opacity 方法有效，但是，按钮在页面上是活动的，只是不可见。

因此，如果您的不透明度为 0 的 div 与您需要单击的任何其他内容重叠，您将不小心单击隐藏的按钮。

我希望这种方法能奏效，可悲的是，对于我的网站来说，这不是由于这个原因。

于 2012-10-15T23:36:34.957 回答
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的数据

于 2014-09-20T13:38:27.280 回答
1

这不是答案，这是评论！希望我会回来并努力解决它并将其变成答案。

处理同样的问题。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 中删除我的“隐藏”类，<span>并且<iframe>facebook 放置在 div.fb-like 中会更改样式属性的宽度和高度。

所以，当页面被渲染时（再次，大量剥离 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 正在做的事情。只是希望这可以帮助某人。

于 2012-10-18T22:08:42.080 回答
1

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

.hide2 {
   margin-top: -1000px !important;
   position: relative ;
   z-index: -1 !important;
}
于 2013-04-19T15:27:36.300 回答
1

将 opacity 设置为 0 对我来说不是一个解决方案，因为它会隐藏和重叠您需要单击的任何内容，并且 jquery fadein 函数使用 css display 属性而不是 opacity。

所以我想出的解决方案是将容器显示为块但在窗口左侧：-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);

});

单击此处的 +Share 按钮以测试此解决方案。

于 2013-02-28T08:27:45.107 回答
0

每个浏览器在 jsfiddle 上的工作方式都不同。如果您尝试将代码加载到您可以制作的测试 html 文件中。它可能仍然有效。只是不在 js fiddle.. 有时 jquery 不会覆盖 css 文件或标签中的 css 代码.. 所以如果它这样做的话。它可能被隐藏起来。

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

于 2012-09-06T22:25:35.817 回答
0

我更喜欢在容器中使其成为绝对

  iframe{
     position: absolute !important;
     height: 500px !important;
  }
于 2013-12-09T02:14:36.507 回答