当背景图像要延伸整页时，出现在页面右侧的空白

Our webpage background images are having problems in FireFox as well as Safari in iOS on iPads/iPhones with white space showing up on the right side of the page.

我们的网页背景图片在FireFox和iOS的Safari浏览器上都有问题，在ipad或iphone上，页面的右侧会出现空白。

The background images extend fine on other browsers but we're having difficulty not extending the full length of the browser on those browsers.

背景图像可以在其他浏览器上扩展，但是我们很难在浏览器上扩展浏览器的完整长度。

Take a look at our site on FireFox to see what I mean.

看看我们在FireFox上的站点，看看我的意思。

12 个解决方案

#1

187

I added:

我补充说:

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

into your CSS at the very top above the other classes and it seemed to fix your issue.

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

Your updated .css file is available here

您更新的.css文件可以在这里获得

#2

Debug your CSS for Ghost CSS Elements.

调试你的CSS以获取CSS元素。

Use this bookmark to debug your CSS: http://wernull.com/2013/04/debug-ghost-css-elements-causing-unwanted-scrolling/

使用此书签调试您的CSS: http://wernull.com/2013/04/debug-ghost- CSS -elements- cause -unwanted-scrolling/

In my case a Facebook Like Button caused the problem.

在我的例子中，一个类似Facebook的按钮造成了这个问题。

#3

After exploring some of the helpful strategies provided here, I found that I only needed to add iOS specific CSS (I put it at the bottom of my main css sheet.) Seems like hiding the overflow-x was the answer for me. I assume that stating the width at 100% helps in the event that my content goes wide. It should be noted that I was only having this issue in iOS. If it is also in Firefox, just the html and body block should probably be used as the @media is specifically targeting mobile devices.

在研究了这里提供的一些有用的策略之后，我发现我只需要添加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;
  }

}

Please hip me if this seems incorrect to anyone :)

如果这对任何人来说都是不正确的，请告诉我。

#4

This is a pretty old question, but I thought I'd add my 2 cents. I've tried the above solutions, including the ghost css, which I will definitely be saving for future use. But none of these worked in my situation. Here's how I fixed my issue. Hopefully this will help someone else.

这是一个很老的问题，但我想我应该加上2分。我尝试过上面的解决方案，包括ghost css，我肯定会保存下来供以后使用。但在我的情况下，这些都不起作用。以下是我解决问题的方法。希望这能帮助到其他人。

Open inspector (or whatever your preference) and starting with the first div in body tag, add display: none; to just that element. If the scroll bar disappears, you know that element contains the element that's causing the issue. Then, remove the first css rule and go down one level into the containing element. Add the css to that div, and if the scroll bar goes away, you know that element is either causing, or containing the offending element. If adding the CSS does nothing, you know it was not that div that caused the issue, and either another div in the container is causing it, or the container itself is causing it.

打开检查器(或任何您喜欢的)，从body标记中的第一个div开始，添加display: none;该元素。如果滚动条消失，您知道该元素包含导致问题的元素。然后，删除第一个css规则，向下进入包含元素的一个级别。将css添加到这个div中，如果滚动条消失了，您就知道该元素正在导致或包含该违规元素。如果添加CSS什么都不做，那么您知道不是div引起了问题，或者是容器中的另一个div导致了问题，或者是容器本身造成了问题。

This may be too time consuming for some. Lucky for me, my issue was in the header, but I can imagine this taking a bit of time if your issue was say, in the footer or something.

这对一些人来说可能太耗时了。幸运的是，我的问题出现在页眉，但我可以想象如果你的问题出现在页脚或其他地方，这将花费一些时间。

#5

The problem is in the file :

问题在文件中:

style.css - line 721

风格。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;
}

remove the lines :

删除:

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

This basically gives a shadow gradient only to the footer. In Firefox, it is the first line that is causing the problem.

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

#6

overflow-x: hidden; works perfect for me.

overflow-x:隐藏;工作适合我。

#7

I've also had the same issue ( Website body background rendering a right white margin in iPhone Safari ) and found that adding the background image to the <html> tag fixed the problem.

我也遇到过同样的问题(在iPhone Safari中，网站主体背景显示了一个正确的白色边距)，并发现在标签中添加背景图像解决了这个问题。

Before

之前

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

After

后

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

#8

Apparently the (-o-min-device-pixel-ratio: 3/2) is causing problems. On my test site it was causing the right side to be cut off. I found a workaround on github that works for now. Using(-o-min-device-pixel-ratio: ~"3/2") seems to work fine.

很明显(-o-min-device-pixel-ratio: 3/2)正在引起问题。在我的测试站点上，它导致了右侧被切断。我在github上找到了一个工作，现在可以工作了。使用(-o-min-device-pixel-ratio: ~“3/2”)似乎很有效。

#9

I had the same issue, so tried a few things. One of which seemed to work for me - removing the width and adding a float to the body tag.

我也有同样的问题，所以尝试了一些东西。其中一个似乎对我有用——删除宽度并向body标记添加一个浮动。

May not work for all instances, but in the scenario I recently had, hiding overflow on content elements was a no go...

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

#10

I was experiencing the white line to the right on my iPad as well in horizontal position only. I was using a fixed-position div with a background set to 960px wide and z-index of -999. This particular div only shows up on an iPad due to a media query. Content was then placed into a 960px wide div wrapper. The answers provided on this page were not helping in my case. To fix the white stripe issue I changed the width of the content wrapper to 958px. Voilá. No more white right white stripe on the iPad in horizontal position.

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

#11

I see the question has been answered to a general standard, but when I looked at your site I noticed there is still a horizontal scroll-bar. I also notice the reason for this: You have used the code:

我看到这个问题已经得到了一个通用标准的回答，但是当我查看您的站点时，我注意到仍然有一个水平滚动条。我也注意到这样做的原因:您使用了代码:

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

which is being used alongside code stating that the element has a width of 100%, causing an element with a total width of 112% of screen size. To fix this, either remove the padding, replace the padding with a margin of 12% for the same effect, or change the width (or max-width) of the element to 88%. This occurs in main.css at line 343. Hope this helps!

它与代码一起使用，代码声明元素的宽度为100%，导致元素的总宽度为屏幕尺寸的112%。要解决这个问题，可以删除填充，用12%的空白替换填充，或者将元素的宽度(或者最大宽度)更改为88%。这主要发生在。css在第343行。希望这可以帮助!

#12

This question has been hanging around for a while, but none of the fixes I could find worked for me (having the same issue with ipad), but I managed my own solution which should work for most people I imagine.

这个问题已经存在了一段时间，但我能找到的解决方案中没有一个对我有用(ipad也有同样的问题)，但我找到了我自己的解决方案，它应该适用于我想象中的大多数人。

Here's my code:

这是我的代码:

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

Enjoy!

享受吧!

#1

187