Facebook Like 按钮未在 Firefox 和 IE 中显示答案

【问题标题】：Facebook Like Button not showing in Firefox and IEFacebook Like 按钮未在 Firefox 和 IE 中显示
【发布时间】：2012-12-28 14:44:38
【问题描述】：

我遇到了奇怪的问题。我正在尝试在我的网站上添加 Facebook Like 按钮，但它没有出现在 Internet Explorer 和 Firefox 中。是的，我已经添加了这个：

<html xmlns:fb="http://ogp.me/ns/fb#">

和 FB-Root 和 JS SDK。每当我尝试添加 XFBML 或 HTML5 版本时，它总是不会出现在 IE 和 Firefox 中。在 Chrome 和 Safari 中运行良好。

但是，当我将光标留在显示 div 的按钮上时，鼠标悬停在包含类似 FB 的框上时，它将正确显示。此外，当我将这个赞按钮放在我网站上的任何其他位置时，它会显示出来。

代码如下：

<li id="menu-item-21" class="ikonka menu-item menu-item-type-custom menu-item-object-custom menu-item-21">
<a href="#"><span class="fb ikoneczka"></span> 
<div class="box_pop">
<p>Text</p><hr/>
<div class="fb-like" data-href="http://facebook.com/facebook" data-send="false" data-layout="button_count" data-width="150" data-show-faces="false"></div>  
</div>
</a>
</li>

看起来 Firefox 和 IE 在开始加载页面时呈现此框。然而，他们为他们留下了空间。这很奇怪。

我希望你能帮助我。提前致谢。

【问题讨论】：

您的 IE 和 FireFox 浏览器是最新的吗？
是的，他们显然是。
我刚刚发现如果我将 box_pop 保留为 'display: block;'，那么它将显示在 IE 中。有趣。

标签： facebook internet-explorer firefox facebook-like

【解决方案1】：

好的，所以我找到了解决这个问题的方法。

首先，我清除了我的 css 文件中的所有 z-index 并将 z-index: 8; 设置为 .box_pop。

其次，将.ikonka div 设置为display: none; 并留下.ikonka:hover div 什么都没有（你可以不把它放在css 中）。

第三，我设置了一些 jQuery：

 <script>
 $(document).ready(function() {
 $('#your-li-id').hover(function() {
 $(this).addClass('pretty-hover');
 }, function() {
 $(this).removeClass('pretty-hover');
 });

 });
 </script>

注意：#your-li-id 在哪里，您必须将li 元素的 id 放在这里。该脚本会将pretty-hover 类添加到您的li。然后，在 CSS 中，输入：

.pretty-hover div{
    display: block;
}

它现在应该可以工作了。

如您所见，您不得将 display: none; 设置到 CSS 中，然后 - 也可以通过 CSS - 只需在悬停时添加 display: block;。

如果您这样做，iFrame 将不会在 IE 甚至 FF 中可见。你必须用 jQuery 来做这个技巧。

【讨论】：

【解决方案2】：

我只在 Firefox (v.29.0.1) 上遇到了同样的问题，结果是 AdBlock plus (v.2.6) 阻止了“赞”和“分享”按钮的呈现。

【讨论】：