使Facebook頁面插件具有響應性（在各處搜索並且找不到解決方案）

Question

看來Facebook已決定將“喜歡”框更改為頁面插件，並將最大尺寸限制為500px。

帶有腳本的頁面： http : //akecheta.com/facebooklikeplugin-sensitive.html

我的問題恰恰是我不能在likebox上使用全角布局。 到目前為止，這是我嘗試過的：

 /* 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;
}

它的運行非常出色，但是后來我將這些更改保存到樣式表中，沒有任何反應。

頁面加載時，所有類都將更改，但ID #u_0_0仍保持不變。 好像它不存在。

現在，我正在嘗試解決此問題的方法，因為我需要使用具有全寬布局的頁面插件。

Answer 1

當您在devtools中動態執行CSS而不是將其放入樣式表時，之所以能使CSS工作，是因為無法在CSS外部對要加載插件的iframe進行樣式設置。 設置iframe樣式的唯一方法是從iframe本身內部。 由於您是將其作為第三方插件加載的，因此您需要尋找一種在iframe完全加載后將樣式動態注入iframe的方法。

請參閱此問題，以了解您要執行的操作的更多方向： 使用jQuery將樣式表附加到iframe