Jquery 加载时不显示类似Facebook的按钮隐藏

我有点受不了这个。我有一个文章列表，上面有链接到整篇文章的片段。当您将鼠标悬停在每个宣传栏上时，宣传栏底部会出现一个包含社交共享按钮（FB、Twitter和G+1）的栏

请注意，在JSFIDLE示例中，格式已经简化，而G+1不起作用——对这个问题不重要

我的问题是FB-like按钮加载不正确。在Chrome中，一切正常。在FF或IE中，FB按钮加载“隐藏”，我无法让它们显示

如果当页面仍在加载时，您的鼠标位于其中一个文章按钮上方，则该文章的FB按钮可以正常加载。如果在FB完成加载时隐藏悬停效果，则无论是爱情还是金钱都不会显示悬停效果

我把它拆开，发现如果我删除css

display:none从
内容框。故事悬停在
上，可以正常加载。当然，这也意味着隐藏的面板将一直可见，直到有人将鼠标悬停在面板上进行隐藏，这是行不通的

我想不出怎么解决这个问题。此外，由于类似FB的按钮数量太大，在我的开发版本中会稍微慢一些，因此将
显示：none
延迟到页面加载结束也不起作用
 每个浏览器在JSFIDLE上的工作方式不同。如果您尝试将代码加载到可以创建的测试html文件中。它可能仍然有效。只是别胡闹了。。有时候jquery不会覆盖css文件或标记中的css代码。。因此，如果这样做的话。它可能被藏起来了

当我在电脑/浏览器上操作小提琴时，我看到这种情况是随机发生的。
使用CSS
不透明度是一个很好的选择。。一些基本的东西，比如：

HTML

从那里你可以添加过渡，使它看起来很漂亮
 不透明度方法有效，但是按钮在页面上是活动的，只是不可见

因此，如果不透明度为0的div与需要单击的其他任何内容重叠，则会意外地单击隐藏按钮

我希望这种方法能起作用，但遗憾的是，我的网站没有这样做。
这不是答案，这是评论！希望我能回来研究一下，并把它变成一个答案。

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

简而言之，我的html如下所示：

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



我注意到隐藏容器和未隐藏容器之间的区别，即从div#fb_like_按钮中删除我的“隐藏”类，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开发工具玩width和height样式可以让我将like按钮重新设置为visible

还没有解决方案，但我会在找到更多信息后不断更新。我将尽力不添加额外的javascript来设置这些样式属性，而是解码facebook正在做的wtf。希望这能对其他人有所帮助。
我们也遇到了同样的问题，通过使用CSS将包含div的初始宽度和高度设置为零，然后在激活触发器时，使用jQuery：


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

淡出时，无需将宽度和高度重置为零。将不透明度设置为零后，仅设置为“显示：无”。现在Facebook按钮已加载并设置了其尺寸，它不会改变。
我使用的另一种方法是在容器显示之前不渲染类似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

或者下面是一个Jquery示例，介绍如何在一个元素中呈现所有XFBML

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

还是纯javascript

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

将“不透明度”设置为0对我来说不是一个解决方案，因为它隐藏并重叠您需要单击的任何内容，而且jquery fadein函数使用css显示属性not 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);

});

单击+共享按钮以测试此解决方案。
不要设置display:none，而是尝试使用页边距顶部或z索引将其隐藏。这两个都不会破坏FB-like按钮

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

我更喜欢把它放在一个容器里

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

使用此CSS：

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

背后的技术：你用CSS覆盖facebook上的数据，方法是使用“！important”
它在那把小提琴上似乎工作正常。。。？你有没有想过使用
不透明度
而不是
显示
和将社交栏从
0
淡入
100
？对我来说，在firefox中小提琴不起作用。将尝试
opacity
：）谢谢相关，但为什么facebook图标包含一个包含这么多HTML的iFrame？@hayk.mart-facebook总是让我觉得臃肿。但这是一个错误necessity@tdun-这似乎奏效了。如果你在这里加上一个答案和这个解决方案，我会给你荣誉：）谢谢你的建议。您还可以调用
FB.XFBML.parse（）显示包含fb-like按钮的元素后，它就会呈现。CSS
可见性
是另一个选项，当您需要元素对鼠标单击透明时，它会非常有用。很棒的提示！谢谢。或者使用不透明度并将高度从0更改为初始值。这也会隐藏我的秘密
  iframe{
     position: absolute !important;
     height: 500px !important;
  }

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