fb like 按钮在所有 ie 版本中的页面 onload 上创建白色背景答案

【问题标题】：fb like button creates a white background on page onload in all ie versionsfb like 按钮在所有 ie 版本中的页面 onload 上创建白色背景
【发布时间】：2016-04-19 03:55:08
【问题描述】：

我已经添加了 Facebook 的点赞按钮<fb:like href="http://mysite.com" class="myFacebook" layout="button_count" ></fb:like>。

当我的页面以任何方式加载时，即在出现点赞按钮之前有一个明显的白色背景，有什么办法可以消除它吗？

【问题讨论】：

标签： html css facebook

【解决方案1】：

这是正在加载其内容的iframe。

您可以在iframe 上设置visibility: hidden，然后在加载后显示它以避免这种情况。

【讨论】：

如何知道 iFrame 何时加载？我设法使用 $('#fblike iframe').ready() 来捕获就绪事件，但此时它没有完全加载，并且 .load() 似乎不起作用（它永远不会被调用）。
@AlexBlack onload="this.style.visibility = 'visible';"

【解决方案2】：

只需使用 CSS 隐藏容器，然后在 iframe 加载后显示它，这可以通过两种方式完成：

<style>#fblike { visibility:hidden; }</style> /* Hide container */

<script>
FB.XFBML.parse(document, function(){
   $('#fblike').css({'visibility':'visible'}); /* Show container once loaded */
});
</script>

如果您没有使用此 FB.XFBML.parse() 函数，那么您可以在所有内容都呈现后订阅事件：

window.fbAsyncInit = function () {
        FB.init({
            appId: 'APP_ID',
            xfbml: true
        });

        FB.Event.subscribe('xfbml.render',
            function () {
                 $('#fblike').css({'visibility':'visible'}); /* Show container once loaded */
            }
        );
    };

我花了一段时间才发现这一切！这是我找到解决方案的链接：http://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/

【讨论】：

【解决方案3】：

你应该在iFrame中设置allowtransparency="true"。

【讨论】：

【解决方案4】：

我必须这样做才能让它工作

.fb_iframe_widget_fluid{
    background:none !important;

    //If you want no padding and no margin
    padding:0 !important; 
    margin:0 !important;
}

【讨论】：