HTML/CSS：总页面宽度比内容宽

我有一个奇怪的问题，我找不到原因！我有以下网页： 页面的感知宽度可能比内容的宽度大300px。因此，即使视口水平拉伸以匹配可见内容，也会显示水平滚动条

我一直在用Firebug检查元素，试图找到罪犯。到目前为止没有成功

在Firefox、Safari和Chrome中观察到这种效果。未经测试：即

非常感谢您的帮助

---

本杰明。

您的facebook按钮导致了此问题（删除按钮会使问题消失）

facebook iframe通过style属性将其宽度设置为

575px

，这导致页面宽度超过100%

---

请注意，您可以添加CSS规则

html，body{overflow-x:hidden；}

来掩盖问题，但实际上，您应该修复该按钮。

有两种方法可以诊断罪魁祸首

方法A

在“元素”选项卡中打开Chrome开发工具

将鼠标悬停在左侧的三角形上，然后按住Ctrl+Alt键单击（Windows）或Option单击（Mac），展开HTML下的所有元素

将鼠标悬停在每个元素上，查看它是否在网页上的区域内突出显示，使其过宽

方法B

打开Chrome开发工具，然后点击Esc打开控制台

粘贴此代码并按Enter键

var docWidth = document.documentElement.offsetWidth;
[].forEach.call(
  document.querySelectorAll('*'),
  function(el) {
    if (el.offsetWidth > docWidth) {
      console.log(el);
    }
  }
);

---

这将找到页面中悬垂的所有元素。多亏了克里斯·科伊尔（Chris Coyier）

我从未见过这样的事。想弄明白，等等。哇，这真的很奇怪。。可能是一些外部小部件（Gacebook/twitter/G+？造成了问题……我也在查看。做得好！我查看的iframe错误。因为我无法更改FB使用按钮发送的样式信息（对吗？），所以我用一个可行的宽度覆盖了它们的样式指令：.FB_UI_Hidden{width:200px！重要；}方法B只产生“未定义的”@AuntJemima说，在这种情况下，没有任何东西是不受限制的。在控制台中，代码不返回任何东西，因此无论您是否找到任何东西，它都将以返回值'undefined'结束。我建议用一种稍微不同的方式，它给了我匹配元素的数组，而不是未定义的-``var docWidth=document.documentElement.offsetWidth；[].filter.call（document.querySelectorAll（'*'）、函数（el）{return（el.offsetWidth>docWidth）}）```