Question

我有以下网站：

www.thewhozoo.com

它在桌面上工作正常，但由于某些原因在移动设备的浏览器上，它旁边有一个灰色条。

我有以下代码：

CSS

body {
    background-color: #4B5961;
    width: 100%;
    margin: 0;
}

.top-container {
    float: left;
    width: 100%;
    background: linear-gradient( rgba(0,0,0,0.1), rgba(0, 0, 0, 0.1) ),url('../images/background1.jpg') no-repeat center center fixed; 
       -webkit-background-size: cover;
       -moz-background-size: cover;
       -o-background-size: cover;
       background-size: cover;
  }

HTML

<body>

    <div id="image-head" class="top-container">

侧面的灰色线条与身体的背景颜色相同（#4B5961）。

如您所见，我的身体宽度和背景图片宽度都设置为100%。所以我不希望看到灰线。我认为这是滚动条的结果。

如果有人可以建议我如何删除它，我将不胜感激。

Answer 1

检查此css规则的样式，取出padding-left: 10px;：

.wz-title {
    color: #B2D137;
    font-weight: bold;
    /* padding-left: 10px; */
    font-size: 110%;
    text-shadow: 0px 0px 10px rgba(0,0,0,0.7), 0px 0px 1px rgba(0,0,0,0.4);
}

Answer 2

使用.wz-title删除填充。出于某种原因，删除填充会修复它。

.wz-title {
  padding-left: 0;
}

下面：

Answer 3

设置overflow-x：hidden;在你的身体上，这将解决它：

body {
overflow-x:hidden;
}

Answer 4

试试这个：

body, body * {
    box-sizing: border-box;
}

通过使用上述代码，您永远不会遇到填充的任何问题。：）

CSS图像宽度为100％，但仍有一些背景

4 个答案: