HTML/CSS : total page width is wider than content

Question

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

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

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

非常感谢任何帮助!

本杰明。

Answer 1

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

方法一

1. 在“元素”选项卡中打开 Chrome 开发工具。
2. 将鼠标悬停在左侧的三 Angular 形上，然后按 Ctrl+Alt 单击 (Windows) 或单击 Option (Mac)，展开 HTML 下的所有元素。
3. 将鼠标悬停在每个元素上，查看它是否突出显示在网页区域内，使其太宽。

方法二

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/