css - Facebook Javascript SDK 在 Firefox 的响应式 Twitter Bootstrap 页面中导致额外的边距/填充

Question

我一直在绞尽脑汁想弄清楚为什么当窗口宽度 <600px 时，我基于 Bootstrap 响应式的页面在 Firefox 和 IE 的右侧有额外的 25-30px。 我开始一个一个地删除我的部分代码，直到我只剩下流畅的导航栏和 Facebook SDK。一旦我删除了 Facebook JS SDK 引用，右侧的填充就消失了。

你可以在这里看到:

包含 FB JS SDK，额外的右侧填充: https://dl.dropbox.com/u/571515/chewsy/Test/FB-with.htm

如果删除 FB JS SDK，它将按预期工作(右侧无填充): https://dl.dropbox.com/u/571515/chewsy/Test/FB-without.htm

由于我的页面上的点赞按钮需要 Facebook JS SDK，我该如何解决这个问题？

奇怪的是，在 Safari 和 Chrome 中这不会重现。

来自 Firefox 的屏幕截图:

IE 截图:

Answer 1

按照 CBroe 的建议，您可以尝试更改#fb-root 样式，但可能有一些 JS 操作会再次更改它，或者它可能只是禁用一些功能。

所以我建议将此添加到您的样式中:

html { overflow-x: hidden; }

通过此修复，如果您的窗口非常小并且需要水平滚动条，您可能会遇到一个小问题。您可以试试这个，尽管填充会重新出现在 200 像素以下:

@media (max-width: 200px) {
    html { overflow-x: auto; }
}

在 FF13 和 IE9 上测试(无法将 IE9 窗口调整为小于 200 像素)。