1

在我第一次尝试响应式网页设计时，我遇到了一个奇怪的问题。当我将浏览器的大小调整到 615 像素或以下时，会出现一个水平滚动条。我不确定是什么因素导致了这种情况。我尝试使用在每个元素周围放置边框

* {
    border:1px solid #FFF;
}

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

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

谢谢！

编辑：所以我只在 Firefox 中获得滚动条。Chrome 工作正常，桌面版 Safari，但在我的 iPhone 上它水平滚动。

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

4

3 回答 3

1

德文，

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

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

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

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

祝你好运，

  • 马特

编辑

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

尝试这个：

body { overflow-x: hidden; }

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

于 2012-07-26T14:54:25.627 回答
0

当它是 nsfw 时，你能警告我们吗：s 使用这个 css：

#content { overflow: hidden }

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

于 2012-07-26T15:04:26.370 回答
0

css3 box-sizing:border-box solved this one.

于 2013-01-22T22:45:51.520 回答