为什么我的页面在右侧溢出？答案

【问题标题】：Why is my page overflowing on the right?为什么我的页面在右侧溢出？
【发布时间】：2011-03-07 06:23:34
【问题描述】：

我正在使用 Matthew James Taylor 的 Holy Grail 3 列液体布局的变体。当我的文档类型是 XHTML 时，它对我来说非常有效。然而，当我转换到 HTML5 时，它开始向右溢出。可见区域仍然可以很好地呈现，但是浏览器在不应该显示水平滚动条时会显示水平滚动条，并且页面右侧有多余的空白。

我的网站在这里： Western Wake Farmers' Market | Link to CSS

关于如何解决此问题的任何见解？

【问题讨论】：

标签： css html layout

【解决方案1】：

您的 #header ul 样式指定 100% 宽度和 22 ems 的左侧填充。

除了内容宽度外，填充也适用，因此您使 ul 比页面宽度大 22 em，并且它必须滚动。

【讨论】：

【解决方案2】：

为什么会发生 - 我不知道，除非你要求我看，否则我不会看。

#header 中的ul 太宽了，这要归功于width: 100% 和（正如我之前提到的@zerocrates 所述）填充的组合。

如何解决：

从ul 中的#header 中删除width: 100%。
如果它以某种方式破坏了某些东西，另一种解决方法是将overflow: hidden 添加到#header。

【讨论】：

感谢您的帮助。有关如何调试此类问题的任何提示？是否有任何工具可以帮助确定这些事情？
我使用带有 Firebug 扩展的 Firefox 来找到这个。我一直向下查看元素树，直到找到有问题的ul。 I saw it was very wide when hovering over it，并且它有 width: 100%，所以我关闭了该规则 - 问题已解决。
感谢您的提示。下次遇到布局问题时，我一定会应用它。