我无法弄清楚为什么会出现滚动条

Question

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

在每个元素周围添加边框

* {
    border:1px solid #FFF;
}

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

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

谢谢！

编辑：所以我只在Firefox中获得滚动条。 Chrome可以正常使用桌面版Safari，但在我的iPhone上可以横向滚动。

编辑：该网站是为合法的按摩业务，但有些人可能会考虑图片NSFW

Answer 1

德文，

尝试使用Firebug for Firefox，IE Developer Tools或Chrome Developer工具等工具。我确信Safari和Opera也有类似的工具。通过这些功能，您可以突出显示和查看页面上每个可见HTML元素的各种属性，包括Javascript和CSS信息。

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

另外，你有没有将宽度或最小宽度设置为617像素的CSS样式？或者是共享相同区域并加起来为617像素的元素组合？也许一个表格的列不可收缩？

有很多要看，你的网址看起来可能是色情或其他什么，所以我不能去那里工作并检查出来......

祝你好运，

• 马特

修改 的

我用鞭子愚弄了几分钟，并同意鲁宾的意见，处理溢出将是一个好主意。虽然我认为设置应该在身体而不是#content。

试试这个：

body { overflow-x: hidden; }

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

Answer 2

当你知道nsfw：s时，请你告诉我们 使用这个css：

#content { overflow: hidden }

不是最好的解决方案，但你必须使用firebug来找出什么是突出的 填充和边框也会增加元素的宽度

Answer 3

css3 box-sizing：border-box解决了这个问题。