css - 我想不通为什么会出现滚动条

Question

在我第一次尝试响应式网页设计时，我遇到了一个奇怪的问题。当我将浏览器的宽度调整为 615 像素或更小时，会出现一个水平滚动条。我不确定是什么因素造成的。我尝试使用

在每个元素周围放置一个边框

* {
    border:1px solid #FFF;
}

帮助我可视化元素的边缘位置，但我没有看到任何超出窗口边界的边界。

有人可以看看我的网站并给我一些见解吗？ http://www.ritualbliss.ca

谢谢!

编辑:所以我只能在 Firefox 中获得滚动条。 Chrome 和桌面版 Safari 运行良好，但在我的 iPhone 上它会水平滚动。

编辑:该网站是一家合法的按摩公司，但有些人可能会认为这张照片是 NSFW

Answer 1

德文，

尝试使用 Firebug for Firefox、IE 开发人员工具或 Chrome 开发人员工具等工具。我相信 Safari 和 Opera 也有类似的工具。这些东西将使您能够突出显示和查看页面上每个可见 HTML 元素的各种属性，包括 Javascript 和 CSS 信息。

要考虑的另一件事是不要在 CSS 中使用 * 选择器。我不确定您为什么要在页面上的每个元素周围放置边框，因为对我来说，这在视觉上看起来并不吸引人。 border style 属性将边框的粗细添加到它所应用的任何尺寸。因此，在您的情况下，页面中的每个元素的高度和宽度都增加了 2px，甚至是“html”元素。这可能就是为什么您有滚动条但无法分辨额外像素在哪里的原因。

此外，您是否有任何将宽度或最小宽度设置为 617 像素的 CSS 样式？还是共享同一区域并加起来达到 617 像素的元素组合？也许是一个包含不可收缩列的表格？

有很多东西要看，你的 URL 看起来可能是色情内容或其他内容，所以我无法在工作时去那里查看...

祝你好运

• 马特

编辑

我和 firebug 混了几分钟，同意 Ruben 的观点，处理溢出是个好主意。虽然我认为设置应该在正文而不是#content。

试试这个:

body { overflow-x: hidden; }

就像 Ruben 的回答一样，它隐藏了溢出，但如果人们真的缩小浏览器的范围，你仍然可以获得垂直滚动条。