【问题标题】:Horizontal scroll bar appearing in all mobile browsers水平滚动条出现在所有移动浏览器中
【发布时间】:2012-08-10 16:05:37
【问题描述】:

我有一个非常简单的网站,它在下面创建一个水平滚动条:

安卓:

火狐

迷你歌剧

不在 Android 默认浏览器中,但网站看起来已损坏

iOS:

Safari


这真的没什么大不了,但我将我的网站与 http://google.com 的完整桌面网站进行比较,而 Google 的网站没有遇到与我相同的问题。

我对 CSS 和 HTML 还是很陌生,我觉得我正在打破一些我不知道的非常简单的规则,这会造成这个问题。有关如何解决此问题的任何想法?

如果你想测试它。转至http://natio.in

【问题讨论】:

    标签: html css


    【解决方案1】:

    出现水平滚动条是因为您在元素上设置了固定宽度,当在移动浏览器上查看网站时,这些元素的宽度设置为比视口宽度更宽。如果您对宽度使用百分比,您的网页将能够进行相应的调整。

    【讨论】:

    • 好吧,我可以接受它有滚动条,但我不明白为什么它会在黑条穿过时产生奇怪的效果。截图在这里:docs.google.com/open?id=0B7D4SZeRrwSGcHU3Y0VELVVnSVE你可以看到黑条没有一直穿过。
    • 这也可能是由 100% 宽度的元素也有左或右填充(这迫使元素比 100% 宽)引起的。要解决此问题,需要将 box-sizing 设置为 border-box
    【解决方案2】:

    好吧,您可以在 body 标签的样式中包含 overflow-x: hidden;,但如果有超出手机宽度的内容,您将无法访问它。或者,您可以使用媒体查询创建响应式布局。

    【讨论】:

    • 将它添加到我的身体中,但我仍然遇到问题。
    • 是的,我现在把它放回去了,但我把它取下来了,因为它不起作用。
    • 好吧,那我不确定。我正在手机上测试它,我遇到了同样的问题。
    猜你喜欢
    • 2018-03-23
    • 1970-01-01
    • 2010-11-09
    • 1970-01-01
    • 2016-11-16
    • 1970-01-01
    • 1970-01-01
    • 2012-03-14
    • 2010-09-19
    相关资源
    最近更新 更多