Facebook Like Button 创建 CSS 样式为 -2000px 的 div，在网站上创建白框答案

【问题标题】：Facebook Like Button creating divs with CSS styles of -2000px, creating white boxes on siteFacebook Like Button 创建 CSS 样式为 -2000px 的 div，在网站上创建白框
【发布时间】：2023-03-16 13:23:02
【问题描述】：

我正在使用标准的 HTML5 FB Like 插件，一切似乎都很好 - 直到我在我的网站上查看了一个很长的页面，我注意到我的内容中间有两个框，远离 Facebook喜欢按钮。 XFBML 版本也有同样的问题。

通过查看生成的按钮的代码，我可以看到在div id="fb-root"> 内部创建了一个div，其样式设置为position: absolute; top: -2000px;。

如果你转到connect.facebook.net/en_US/all.js，你可以看到它是在第 26 行第 2282 列创建和设置的。上面写着：ga.style.position='absolute';ga.style.top='-2000px';

在低于此高度的页面上，您看不到方框。但是在比这更长的页面上，会出现这些框。为什么？我怎样才能摆脱这些？我做错了什么？

按钮代码：

<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&appId=<my app id>";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>
        <div class="fb-like" data-href="<my page>" data-send="true" data-width="200" data-show-faces="true" 
             data-layout="button_count" data-action="like" data-font=\"arial\"></div>

【问题讨论】：

标签： javascript facebook html facebook-like

【解决方案1】：

如果您将fb-root 元素放置在具有绝对或相对位置的元素内，就会发生这种情况，否则-2000px 将相对于主体。

如果您将fb-root 元素直接移动到正文中，则不会再发生这种情况。

【讨论】：

我想这就是为什么他们告诉你把它放在正文标签的开头......谢谢！

【解决方案2】：

尝试添加：

ga.style.backgroundColor='transparent';

或：

ga.style.visibility='hidden';

【讨论】：

谢谢，但我无法编辑 connect.facebook.net/en_US/all.js 并且我并不是真的在寻找破解解决方案；显然我是少数几个有这个问题的人之一，所以我一定做错了什么
您应该能够检测到此元素并在您自己的脚本中操作样式。这个实现看起来像是一个 hack，所以除了加入之外，你可能没有任何真正的选择。
你的意思是实现看起来像一个黑客？这是 Facebook Developers Like 按钮生成器生成的确切代码。 developers.facebook.com/docs/reference/plugins/like
任何风格为 -2000px 的东西都是 hack，即使它是由 Facebook 开发人员创作的。