css - 数据布局 ="box_count"未显示正确的宽度

Question

我正在为一个非常奇怪的问题而苦苦挣扎。

当我在点赞按钮上使用 data-layout="box_count"时，点赞框的宽度被削减了，但是当我使用 data-layout="standard"时，with 是绝对正确的。

我使用的代码是 HTML5，并且直接在开发人员的盒子里。

<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_GB/sdk.js#xfbml=1&appId=504558953003252&version=v2.0";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

这是一些我觉得它看起来如何的图片，

数据布局="box_count"

数据布局="标准"

有什么想法吗？

Answer 1

检查您的 CSS 并确保没有任何东西阻止 iframe 按照插件的意愿绘制。

几天前我遇到了完全相同的问题，在提交错误报告后，Facebook 告诉我哪个 CSS 样式存在冲突。

一些你应该注意的事情:

• 检查 iframe 元素或其容器上是否有 max-width: (这是我的情况，我为客户端修改了一个 WordPress 主题，这是在 CSS 重置中，所以我没注意到……)
• 尝试在所有 iframe 的父级上强制 overflow: visible(文档建议如此)

来自Like Button documentation :

When I click the Like button, the comment popup window ('flyout') doesn't show. Why?

If the Like button is placed near the edge of an HTML element with the CSS overflow property set to hidden, the flyout may be clipped or completely hidden when the button is clicked. This can be remedied by setting the overflow property to a value other than hidden, such as visible, scroll, or auto.