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

Question

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

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

在Firefox，Safari，Chrome中观察到此效果。未经测试：IE。

任何帮助都非常感谢！

本杰明。

Answer 1

你的facebook按钮导致了这个问题（删除按钮会使问题消失）。

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

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

Answer 2

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

方法A

1. 在“元素”标签中打开Chrome开发工具。
2. 将鼠标悬停在左侧的三角形上，然后按住Ctrl + Alt键（Windows）或按住Option键选择（Mac），展开HTML下的所有元素。
3. 将鼠标悬停在每个元素上，看它是否突出显示在网页上的区域内，使其过宽。

方法B

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

2. 粘贴此代码并按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/