有什么办法可以改变 Facebook Like Box 的 CSS 吗？答案

【问题标题】：Is there any way to change the CSS of the Facebook Like Box?有什么办法可以改变 Facebook Like Box 的 CSS 吗？
【发布时间】：2013-08-07 19:30:40
【问题描述】：

所以我正在尝试通过任何可能的方式来修改 Facebook Like Box 的 CSS。我找到了有问题的价值，我想改变它。这是在 iframe 内。

CSS 是这样的：

.pluginLikeboxStream {
overflow-x: hidden;
overflow-y: auto;
}

这导致 Like Box 流上总是有一个滚动条，我真的非常不想要。

无论如何我都没有看到要修改它 - 不是 Javascript SDK（我认为这是我最大的希望），不是通过在其上使用 Javascript 或 jQuery（因为它创建了一个 iframe，这是不可能的，就我看得出来——尽管 Firebug 让我改变了这一点）。

显然最好的解决方案是能够使用 CSS 设置样式，但这似乎也是不可能的。

有没有办法解决这个问题？

我尝试加载没有滚动条的 iframe，但这只是在 iframe 的外部 - 这显然是内部的。

我想要的只是将这个类设置为overflow: hidden;

【问题讨论】：

标签： javascript css facebook

【解决方案1】：

Facebook 官方 Like Box 的 CSS 无法更改，因为它是外部 iframe。

在this 重复阅读更多内容。

【讨论】：

【解决方案2】：

由于您要通过 CSS 更改的内容位于 iframe 中，因此您可以inject a style into the iframe。但正如 Vector 所说，要知道自己在做什么。

【讨论】：

我不是在改变样式，而是在改变滚动条的位置，因为它所在的位置没有任何意义。
改变滚动条的位置是改变样式的一部分。 CSS 代表级联样式表。 .css 文件中的任何内容都被视为元素样式。

【解决方案3】：

您可以创建自己的“点赞”按钮 - 没有点赞数（但您可以解决此问题），然后使用 JS API 来“点赞”网址

【讨论】：

【解决方案4】：

如果你设置了!important，那么它会覆盖应用到该元素的任何其他 CSS

.pluginLikeboxStream {
    overflow: hidden !important;
}

!important 只能在这种情况下使用。

已编辑

要将它应用到你需要使用 jQuery 的 iFrame

$('iframe').load( function() {
    $('iframe').contents().find("head")
      .append($("<style type='text/css'>  .pluginLikeboxStream {overflow: hidden !important;} /style>"));
});

这就是我一直这样做的方式。

【讨论】：