当背景图像应该延长整个页面长度时，页面右侧会显示空白

小开

我补充道:

html,body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}

你的 CSS 在最上面的其他类，它似乎解决了你的问题。

您的更新后的.css 文件可以在这里找到

小开

问题在于文件:

Style.css-line 721

#sub_footer {
background: url("../images/exterior/sub_footer.png") repeat-x;
background: -moz-linear-gradient(0% 100% 90deg,#102c40, #091925);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#091925), to(#102c40));
-moz-box-shadow: 3px 3px 4px #999999;
-webkit-box-shadow: 3px 3px 4px #999999;
box-shadow: 3px 3px 4px #999999;
padding-top:10px;
font-size:9px;
min-height:40px;
}

删除线条:

-moz-box-shadow: 3px 3px 4px #999999;
-webkit-box-shadow: 3px 3px 4px #999999;
box-shadow: 3px 3px 4px #999999;

这基本上只给脚注一个阴影渐变。在 Firefox 中，这是导致问题的第一行。

小开

我也遇到过同样的问题(网站正文背景渲染在 iPhone Safari 的右白边) ，并且发现将背景图像添加到 <html>标记中可以解决这个问题。

之前

body {background:url('images/back.jpg');}

之后

html, body {background:url('images/back.jpg');}

小开

这个问题已经存在一段时间了，但是我找到的所有修复方法都不适合我(在 ipad 上也有同样的问题) ，但是我管理了我自己的解决方案，它应该适用于我想象中的大多数人。

这是我的密码:

html {
background: url("../images/blahblah.jpg") repeat-y;
min-width: 100%;
background-size: contain;
}

好好享受吧！

小开

在探索了这里提供的一些有用的策略之后，我发现我只需要添加 iOS 特定的 CSS (我把它放在我的主 CSS 表的底部)看起来隐藏溢出 X 就是我的解决办法。我假设在100% 的宽度声明有助于在事件中，我的内容变宽。值得注意的是，我只在 iOS 系统中遇到过这个问题。如果它也在 Firefox 中，那么可能只需要使用 html 和 body 块，因为@media 是专门针对移动设备的。

@media
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5){


html,
body{
width:100%;
overflow-x:hidden;
}


}

如果这对任何人来说似乎不正确，请告诉我:)

小开

显然(- o-min-device-px-ratio: 3/2)引起了一些问题。在我的测试现场，它导致右侧被切断。我在 Github上找到了一个可行的解决方案。使用(- o-min-device-like-ratio: ~ “3/2”)似乎可以很好地工作。

小开

我正在体验我的 iPad 右侧的白线，也只是在水平位置。我使用的是一个固定位置的 div，背景设置为960px 宽，z-index 为 -999。由于媒体查询，这个特殊的 div 只会出现在 iPad 上。然后将内容放入一个960px 宽的 div 包装器中。这一页提供的答案对我的情况没有帮助。为了解决白色条纹问题，我将内容包装器的宽度更改为958px。好了。没有更多的白色右白色条纹在 iPad 上的水平位置。

小开

我看到这个问题已经回答了一般标准，但是当我看到你的网站时，我注意到仍然有一个水平滚动条。我还注意到其中的原因: 你使用了密码:

.homepageconference .container {
padding-left: 12%;
}

它与代码一起使用，代码声明元素的宽度为100% ，导致元素的总宽度为屏幕大小的112% 。要解决这个问题，可以删除填充，为了同样的效果用12% 的边距替换填充，或者将元素的宽度(或最大宽度)更改为88% 。这发生在 main.css 的第343行。希望这个能帮上忙！

小开

为幽灵 CSS 元素调试 CSS。

使用此书签调试您的 CSS: https://blog.wernull.com/2013/04/debug-ghost-css-elements-causing-unwanted-scrolling/

或者自己直接添加 CSS:

* {
background: #000 !important;
color: #0f0 !important;
outline: solid #f00 1px !important;
}

在我的案例中，是 Facebook 的“喜欢按钮”导致了这个问题。

小开

我也有同样的问题，所以尝试了一些方法。其中一个方法似乎对我有效——移除宽度并在 body 标签中添加一个 float。

可能不适用于所有实例，但是在我最近的场景中，在内容元素上隐藏溢出是不可行的..。

小开

这是一个很老的问题，但我想我应该加上我的意见。我已经尝试了上面的解决方案，包括幽灵 CSS，我一定会保存，以备将来使用。但在我的情况下，这些都不管用。我是这样解决问题的。希望这能帮到别人。

打开查看器(或者其他你喜欢的选项) ，从 body 标记的第一个 div 开始，将 display: none;添加到该元素中。如果滚动条消失了，那么您就知道元素包含导致问题的元素。然后，删除第一个 css 规则并向下一级进入包含元素。将 css 添加到该 div 中，如果滚动条消失，则知道该元素要么导致，要么包含违规元素。如果添加 CSS 没有任何作用，那么您就知道问题不是那个 div 引起的，要么是容器中的另一个 div 引起的，要么是容器本身引起的。

对某些人来说，这可能太耗费时间了。幸运的是，我的问题是在标题，但我可以想象这需要一点时间，如果你的问题是说，在页脚或东西。

小开

overflow-x: hidden;对我来说太完美了。