Facebook Like 按钮在返回页面后移动并变为 1000px 高答案

【问题标题】：Facebook Like button moves and becomes 1000px high after going back to a pageFacebook Like 按钮在返回页面后移动并变为 1000px 高
【发布时间】：2014-02-26 19:19:46
【问题描述】：

我们发现 Facebook 上的点赞按钮出现了奇怪的行为。用例如下：

加载页面，facebook like 按钮位于页眉中。
点击一个链接，进入一个新页面，facebook like 按钮也在那个页面上。
点击返回按钮。
上一页的点赞按钮现在向右移动了约 100 像素，取自 position: absolute，现在高 1000 像素，透明元素覆盖了页面上低于 FB 点赞按钮的所有元素。
单击前进。第二页有同样的错误。

以下是我们看到的其他一些奇怪的行为：

FB div 中有一个跨度，它只是在元素样式中添加了高度和宽度。它以 200 像素 x 1000 像素开始。有时它会突然跳到 0px x 0px - 到目前为止，我看不出有什么押韵或原因。
我们的一些页面有很多类似 FB 的按钮。它们都表现出相同的行为。
在 iPad 上，FB 按钮在返回页面后显示为 display: block。

【问题讨论】：

标签： javascript css facebook

【解决方案1】：

显然这是一个已知问题。

https://developers.facebook.com/x/bugs/663421210369743/

我们使用以下方法解决了这个问题：

.fb-like {
  display: inline-block !important;
  vertical-align: middle !important;
  margin-right: 1.5em;
  line-height: 30px;
  width: 81px !important;
  height: 22px !important;
  position: relative;
  z-index: 1002;
}
.fb-like > span {
  vertical-align: top !important;
  min-width: 81px !important;
  min-height: 22px !important;
}
.fb-like > span > iframe {
  min-width: 81px !important;
  min-height: 22px !important;
}

【讨论】：

太棒了！我将所有 min-width 和 min-height 属性更改为 max-width 和 max-height :)
感谢您，这对我们帮助很大！但是看到我们必须有一个不同语言的like按钮（“Like”在丹麦语中变成了“Synes godt om”！），我们删除了代码中的宽度并设置了一个小调整函数：var fbResize = setInterval(function () { if ($('.fb_iframe_widget').first().width() != ('.fb_iframe_widget > span').first().width()) { $('.fb-like').width($('.fb_iframe_widget > span').first().width()); clearInterval(fbResize); } }, 100);