Question

似乎Facebook决定将类似的框更改为页面插件，并将最大尺寸限制为500px。

使用脚本的页面：http://akecheta.com/facebooklikeplugin-responsive.html

我的问题就是那个，我不能在喜欢的盒子上使用全宽度布局。这是我到目前为止所尝试的内容：

 /* Fits the like box to the parent div, creating a fluid layout */
#u_0_0 > div {
  width: 100% !important;
}
/* Fits the background image to the like box */
.uiScaledImageContainer._2zfr {
  width: 100% !important;
}

/* Modifies the first background color of the fans part */
._h7l {
  background: #EE6C00 !important;
}
/* Modifies the second background color of the fans part */
._h7n {
  background: transparent !important;
}
/* Modifies the color of the text above the fans thumbnails */
/* Modifies the color of the text above the fans thumbnails */
._50f3 {
  font-size: 150%;
  line-height: 25px;
  color: #FFFFFF !important;
}

它在飞行中效果非常好，但后来我将这些更改保存到我的样式表中，没有任何反应。

页面加载时会更改所有类，但标识#u_0_0仍然保持不变。它就好像它不存在一样。

现在我正在考虑解决此问题，因为我需要使用带有全宽布局的页面插件。

Answer 1

当你在devtools中动态执行它时你的CSS工作的原因，而不是当你把它放在你的样式表中时，插件加载的iframe不能被它外面的CSS设置样式。设置iframe样式的唯一方法是在iframe内部。由于您将此作为第三方插件加载，因此您需要寻找一种方法，以便在样式完全加载后将样式动态注入iframe。

请参阅此问题，了解您要执行的操作的更多方向：Append a stylesheet to an iframe with jQuery

使Facebook页面插件响应（到处搜索，无法找到解决方案）

1 个答案: