html - Facebook 插件社交，iframe 不适应其父级的宽度

Question

我正在尝试放置一个 Facebook 社交插件 <iframe>在这个layout , 但问题是这个 <iframe> 的内容，它不适应其父级宽度。

这是 <iframe>代码:

<iframe id="fb-page" src="https://www.facebook.com/plugins/page.php?
   href=https%3A%2F%2Fwww.facebook.com%2F505180683015806&tabs=timeline%2C%20messages&
   height=500&
   small_header=true&
   adapt_container_width=true&
   hide_cover=false&
   show_facepile=false" 
height="500" style="border:none;overflow:hidden;" scrolling="no" frameborder="0" allowTransparency="true" ></iframe>

*更改代码只是为了更好地呈现 PHP 参数。

如您所见，adapt_container_width设置为 true , 但无论 wrapper 的大小如何，都没有改变在页面加载时，如果传入参数或设置宽度 340px，则始终获取宽度，这是 Facebook 默认值。

测试了什么:

• 将宽度值指定为 PHP 参数，导致内容具有绝对宽度，并可能导致 Conceal 一些溢出内容。

• 将值为“0”的宽度指定为 PHP 参数，生成宽度为 0px 的内容。

• 将值为“100%25”的宽度指定为 PHP 参数，结果为空白帧。

• 在 iframe 元素上指定宽度为 100%，不要更改始终为 340px(Facebook 默认值)或通过 PHP 参数定义的值的内容宽度。

您可以使用这个功能齐全的 jsfiddle 查看，已经包含 iframe 代码和 HTML 布局。

我的期望:

制作<iframe>的方法内容使用其父级的 90%，而不是指定绝对宽度并终止响应。只需使用 <iframe> Facebook 提供的代码作为呈现其内容的选项。

提前致谢

Answer 1

我也一样。我想到的唯一解决方案是:

.fb-likebox {
    max-width: 288px;
    overflow: hidden;
    width: 288px;
}

使用 overflow:hidden 至少不会让它看起来破损，但是它确实 Conceal 在盒子里。