Facebook喜欢盒子小部件无法识别数据宽度属性？

Question

我今天才注意到Facebook Like Box小部件的数据宽度属性似乎不起作用.看起来它恢复到默认宽度.我在谈论的一个例子可以在http://blog.christopherjonesart.com上看到.

这是我正在使用的代码(它非常标准):

<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_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-like-box" data-href="http://www.facebook.com/christopherjonescomicart"    data-width="190" height="395" data-show-faces="true" data-border-color="black" data-stream="false" data-header="true"></div>

我在几个网站上遇到过这个问题.它是在Chrome,Firefox,Safari和Internet Explorer中实现的.我最近没有更新Wordpress或对我的CSS进行任何更改.

救命？它看起来真的很糟糕.:-(

Answer 1

Expanding on user2477225's answer, it might have problems with custom positioning that you set (relative or absolute somewhere on the page), so what I did was:

.fb_iframe_widget>span { width: 240px !important; }
.fb-like-box iframe { width: 240px !important; }

Seems to be working so far.

Edit: For IE 8 (and lower), please use this instead:

.fb_iframe_widget span { width: 240px !important; }
.fb-like-box iframe { width: 240px !important; }

I like to be as specific as possible in my selectors, but after checking this issue some more, I see no technical reason to use the > selector here.

Answer 2

我认为我们应该告诉fb修复他们的哑剧本,现在fb就像盒子一样,宽度必须至少为292像素.

他们清楚地说明了https://developers.facebook.com/docs/reference/plugins/like-box/

支持的最小插件宽度为292像素.

Answer 3

我用一点点CSS黑客修复了宽度,但这只是暂时的.我的黑客是这样的:

.fb-like-box iframe {
     width: your_width_in_px !important;
}