Question

我有一个奇怪的问题。我正在尝试在我的网站上添加Facebook Like Button，但它并没有出现在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正在加载页面时渲染此框。但是，他们为他们留出了空间。这很奇怪。

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

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

现在应该可以了。

正如您所看到的，您必须不能<{1}}进入您的CSS，然后 - 也可以通过CSS - 只需在悬停时添加display: none;。

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

Answer 2

我在Firefox上遇到了同样的问题（v.29.0.1），结果是AdBlock plus（v.2.6）阻止了Like和Share按钮的渲染。

Facebook Like Button没有在Firefox和IE中显示

2 个答案: