0

我一直在努力弄清楚为什么我的基于 Bootstrap 响应式的页面在 Firefox 和 IE 的右侧有一个额外的 25-30 像素，当窗口宽度小于 600 像素时。我开始一一删除我的部分代码，直到我只剩下流畅的导航栏和 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 中，这不会重现。

火狐的截图：

在此处输入图像描述

来自 IE 的截图：

在此处输入图像描述

4

2 回答 2

1

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

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

html { overflow-x: hidden; }

使用此修复程序，如果您的窗口非常小并且需要水平滚动条，您可能会遇到一个小问题。你可以试试这个，虽然填充重新出现在 200px 下：

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

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

于 2012-06-26T08:48:49.977 回答
0

这是导致此问题的 Facebook DIV 元素#fb-root- 一旦您通过 Firebug 将其设置或display:none定位，额外的边距就会消失。absoluteleft:-200px

但是，在您的样式表中这样做可能不是一个好主意，因为 SDK 使用此元素来显示它的对话框等 - 所以这些可能会停止工作（将其设置display:none为应该完全停止它在旧 IE 中的工作），或者SDK 本身可能会再次覆盖此类格式。

如果您尝试添加自己的格式，您应该彻底测试它。

于 2012-06-26T07:43:48.700 回答