我们的网页背景图片在 iPad/iPhone 上的 FireFox 和 iOS 中的 Safari 中存在问题，页面右侧出现空白。
背景图像在其他浏览器上可以很好地扩展，但我们很难在这些浏览器上扩展浏览器的全长。
请look at our site on FireFox 了解我的意思。
【问题讨论】：
我补充说：
html,body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
在其他类上方的最顶部插入您的 CSS，它似乎解决了您的问题。
【讨论】：
为 Ghost 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 Like 按钮导致了问题。
【讨论】：
在探索了这里提供的一些有用的策略后，我发现我只需要添加 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;
}
}
如果这对任何人来说都不正确，请告诉我：)
【讨论】：
这是一个很老的问题，但我想我会加我的 2 美分。我已经尝试了上述解决方案，包括 ghost css，我肯定会保存它以备将来使用。但这些都不适用于我的情况。这是我解决问题的方法。希望这会对其他人有所帮助。
打开检查器（或任何您喜欢的）并从 body 标记中的第一个 div 开始，将 display: none; 添加到该元素。如果滚动条消失，您就知道该元素包含导致问题的元素。然后，删除第一个 css 规则并向下一层进入包含元素。将 css 添加到该 div，如果滚动条消失，您就知道该元素导致或包含有问题的元素。如果添加 CSS 没有任何作用，您就知道不是那个 div 导致了问题，而是容器中的另一个 div 导致了它，或者容器本身导致了它。
这对某些人来说可能太耗时了。幸运的是，我的问题出现在页眉中，但我可以想象如果你的问题出现在页脚或其他地方，这需要一些时间。
【讨论】：
height: 0 或height: 1 这样的奇怪元素时，这确实是成功解决根本问题的唯一方法。就我而言，我发现原因是 Drupal 7 核心中一个错误的“不可见”类：drupal.org/node/2664214
overflow-x: hidden; 非常适合我。
【讨论】：
问题出在文件中：
style.css - 第 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 中，这是导致问题的第一行。
【讨论】：
我也遇到了同样的问题（Website body background rendering a right white margin in iPhone Safari），发现将背景图片添加到<html> 标签可以解决问题。
之前
body {background:url('images/back.jpg');}
之后
html, body {background:url('images/back.jpg');}
【讨论】：
显然 (-o-min-device-pixel-ratio: 3/2) 引起了问题。在我的测试站点上，它导致右侧被切断。我在github 上找到了一个暂时有效的解决方法。 Using(-o-min-device-pixel-ratio: ~"3/2") 似乎工作正常。
【讨论】：
我看到这个问题已经按照一般标准回答，但是当我查看您的网站时，我注意到仍然有一个水平滚动条。我也注意到了这个原因： 你已经使用了代码：
.homepageconference .container {
padding-left: 12%;
}
与声明元素宽度为 100% 的代码一起使用，导致元素总宽度为屏幕大小的 112%。要解决此问题，请删除填充，将填充替换为 12% 的边距以获得相同的效果，或者将元素的宽度（或最大宽度）更改为 88%。这发生在 main.css 的第 343 行。希望这会有所帮助！
【讨论】：
box-sizing 属性设置为border-box。
我遇到了同样的问题，所以尝试了一些方法。其中一个似乎对我有用 - 删除宽度并在 body 标签中添加一个浮点数。
可能不适用于所有实例，但在我最近遇到的情况下，隐藏内容元素上的溢出是不行的......
【讨论】：
这个问题已经存在了一段时间，但我能找到的解决方案都没有对我有用（ipad 也有同样的问题），但我管理了自己的解决方案，它应该适用于我想象的大多数人。
这是我的代码：
html {
background: url("../images/blahblah.jpg") repeat-y;
min-width: 100%;
background-size: contain;
}
享受吧！
【讨论】：
我在 iPad 上遇到了右侧的白线，并且仅在水平位置。我使用了一个固定位置的 div，背景设置为 960px 宽，z-index 为 -999。由于媒体查询，此特定 div 仅显示在 iPad 上。然后将内容放入一个 960 像素宽的 div 包装器中。 此页面上提供的答案对我的情况没有帮助。 为了解决白色条纹问题，我将内容包装器的宽度更改为 958px。瞧。 iPad 上水平位置不再有白色右白条纹。
【讨论】：