Question

就在今天，我在Wordpress博客上发现Facebook iframe在我页面中间显示为一个空白的边框。

问题在于，当Facebook的JS注入内容时，最终会出现一个div：

<div id="fb-root" class=" fb_reset">
    <div style="position: absolute; top: -2000px;">
        ...iframes here...
    </div>
</div>

“top：-2000px”不足以让它脱离可见屏幕，所以它停留在我的页面中间。

有什么方法可以解决这个问题吗？我可以做一些hacky，比如隐藏＃fb-root元素或者将它推离屏幕。这就是我的代码中实际存在的一个div - 其余的，包括违规的样式属性，都是由FB的代码注入的。

我的代码看起来像：

<div id="fb-root"></div>
<script>(function(d, s, id) {
                      var js, fjs = d.getElementsByTagName(s)[0];
                      if (d.getElementById(id)) {return;}
                      js = d.createElement(s); js.id = id;
                      js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
                      fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="(actual URL here)" data-send="false"
        data-layout="button_count" data-width="150" data-show-faces="false"></div>

Answer 1

看起来Facebook修复了这个错误，因为问题已经消失了。

Answer 2

我也注意到了这个错误。但尚未确定。

此错误与wordpress无关。我在magento中看到了相同的行为。当facebook iframe的位置位于页面底部并且页面长度超过2000px时，会发生这种情况。这也是我没有在任何页面上提及它的原因。

有谁知道如何解决这个问题？我不想等待Facebook的解决方案。

Answer 3

上周我在vBulletin论坛上发现了同样的问题，但是今天我又检查了一下，iframe完全消失了。空div“fb-root”仍然存在。

Answer 4

我也有这个问题。我放置了一个相对位置的元素，在我的博客文章下面。但是当我在开始标记之后移动它时问题就解决了。

Facebook iframe在页面中间显示为空

4 个答案: