HTML/CSS：总页面宽度大于内容答案

【问题标题】：HTML/CSS: total page width is wider than contentHTML/CSS：总页面宽度大于内容
【发布时间】：2017-06-28 12:01:52
【问题描述】：

我有一个奇怪的问题，我找不到原因！我有以下网页： http://uk.translation-vocabulary.com/de-german 并且页面的感知宽度可能比内容的宽度大 300 像素。因此，即使视口被水平拉伸以匹配可见内容，也会出现水平滚动条。

我一直在用 Firebug 检查元素，试图找出罪魁祸首。目前没有成功。

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

非常感谢任何帮助！

本杰明。

【问题讨论】：

我从未见过这样的东西。试图弄清楚，坚持下去。
哇，这真的很奇怪......也许是一些外部小部件（Gacebook/twitter/G+ ？正在引起问题......我也在看看。

标签： html css

【解决方案1】：

诊断罪魁祸首的两种方法。

方法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 https://css-tricks.com/findingfixing-unintended-body-overflow/

【讨论】：

方法 B 只产生“未定义”
@AuntJemima 既然如此，没有什么是越界的。在控制台中，代码没有返回任何东西，所以无论你找到什么，它都会以'undefined'的返回值结束
我建议有点不同的方式，它给了我匹配元素的数组而不是 undefined - ``` var docWidth = document.documentElement.offsetWidth; [].filter.call(document.querySelectorAll('*'), function(el) { return (el.offsetWidth > docWidth) });```

【解决方案2】：

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

facebook iframe 的宽度通过 style 属性设置为 575px，这导致页面宽度超过 100%。

请注意，您可以添加 CSS 规则 html,body{overflow-x: hidden;} 来掩盖问题，但您应该真正修复该按钮。

【讨论】：

干得好！我在看错误的 iframe。由于我无法更改 FB 使用按钮发送的样式信息（对吗？），我已经用可行的宽度覆盖了他们的样式指令： .FB_UI_Hidden { width: 200px !important;} 这行得通。