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

Question

我们在facebook按钮上看到了一种奇怪的行为.用例如下:

1. 加载页面,facebook就像按钮一样在标题中.
2. 点击一个链接,转到一个新页面,facebook就像那个页面上的按钮一样.
3. 单击后退按钮.
4. 就像上一页上的按钮现在已经向右移动~100px,采用position: absolute现在是1000px高,透明元素覆盖了比页面上的FB like按钮更低的所有元素.
5. 点击前进.第二页有相同的错误.

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

• FB div中有一个跨度,它的高度和宽度都添加到元素样式中.它最初为200px x 1000px.偶尔它会突然跳到0px x 0px - 到目前为止,我看不出任何押韵或原因.
• 我们的一些页面有很多像FB一样的按钮.它们都表现出相同的行为.
• 在iPad上,FB按钮在display: block返回页面后呈现.

Answer 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;
}