blocks|key|1045671|text|我补充道：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1045672|html,body
{
++++width:+100%25;
++++height:+100%25;
++++margin:+0px;
++++padding:+0px;
++++overflow-x:+hidden;+
}|code-block|syntax|javascript|1045673|添加到位于其他类顶部的CSS中，它似乎解决了您的问题。|1045674|Your+updated+.css+file+is+available+here|offset|length|1045675|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/G8kaL/^0|0|0|0|0|14|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|X|8|@]|9|@$K|Y|L|Z|1|10]]|A|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

I added:

<pre><code>html,body
{
 width: 100%;
 height: 100%;
 margin: 0px;
 padding: 0px;
 overflow-x: hidden; 
}
</code></pre>

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

<a href="http://jsfiddle.net/G8kaL/" rel="noreferrer">Your updated .css file is available here</a>

blocks|key|830787|text|问题出在文件中：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|830788|style.css+-+721行|830789|#sub_footer+{
++++background:+url("../images/exterior/sub_footer.png")+repeat-x;
++++background:+-moz-linear-gradient(0%25+100%25+90deg,#102c40,+#091925);
++++background:+-webkit-gradient(linear,+0%25+0%25,+0%25+100%25,+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;
}|code-block|syntax|javascript|830790|删除以下各行：|830791|-moz-box-shadow:+3px+3px+4px+#999999;
-webkit-box-shadow:+3px+3px+4px+#999999;
box-shadow:+3px+3px+4px+#999999;+|830792|这基本上只给页脚一个阴影渐变。在Firefox中，它是导致问题的第一行。|830793|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

The problem is in the file : 

style.css - line 721

<pre><code>#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;
}
</code></pre>

remove the lines :

<pre><code>-moz-box-shadow: 3px 3px 4px #999999;
-webkit-box-shadow: 3px 3px 4px #999999;
box-shadow: 3px 3px 4px #999999; 
</code></pre>

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

blocks|key|830874|text|这个问题已经存在了一段时间了，但我发现没有一个修复方法对我有效(ipad也有同样的问题)，但我管理着自己的解决方案，我想大多数人都应该能用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|830875|下面是我的代码：|830876|html+{
+++background:+url("../images/blahblah.jpg")+repeat-y;
+++min-width:+100%25;
+++background-size:+contain;
}|code-block|syntax|javascript|830877|享受吧！|830878|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

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.

Here's my code:

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

Enjoy!

blocks|key|1045868|text|在探索了这里提供的一些有用的策略之后，我发现我只需要添加特定于iOS的CSS+(我把它放在我的主css表的底部)。似乎隐藏了溢出-x是我的答案。我假设在我的内容变宽的情况下，将宽度设置为100%25会有所帮助。应该注意的是，我只在iOS中遇到了这个问题。如果它也在Firefox中，那么应该只使用html和body块，因为@media是专门针对移动设备的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1045869|@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%25;
++++overflow-x:hidden;
++}

}|code-block|syntax|javascript|1045870|如果有人认为这是不正确的，请告诉我:)|1045871|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

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.

<pre><code>@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;
 }

}
</code></pre>

Please hip me if this seems incorrect to anyone :)

blocks|key|1045957|text|显然，(-o-min-device-pixel-ratio:+3/2)造成了问题。在我的测试站点上，它导致右侧被切断。我在github上找到了一个暂时有效的变通方法。使用(-o-min-device-pixel-ratio：~"3/2")似乎工作得很好。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1045958|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/cloudhead/less.js/issues/717^0|1P|6|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

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 <a href="https://github.com/cloudhead/less.js/issues/717" rel="nofollow">github</a> that works for now. Using(-o-min-device-pixel-ratio: ~"3/2") seems to work fine.

blocks|key|1046007|text|我在我的iPad上也看到了右边的白线，只是在水平位置。我使用的是固定位置的div，背景设置为960px宽，z-index为-999。由于媒体查询，这个特殊的div只出现在iPad上。然后将内容放入一个960px宽的div包装器中。这个页面上提供的答案对我的情况没有帮助。为了解决白条问题，我将内容包装器的宽度更改为958px。瞧。水平位置的iPad上不再有右侧白色条纹。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1046008|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

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.

blocks|key|831103|text|我看到这个问题已经回答了一个通用的标准，但当我看你的网站时，我注意到仍然有一个水平滚动条。我还注意到这样做的原因:您使用了以下代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|831104|.homepageconference+.container+{
padding-left:+12%25;
}|code-block|syntax|javascript|831105|其与声明元素具有100%25的宽度的代码一起使用，导致元素的总宽度为屏幕尺寸的112%25。要解决这个问题，要么删除填充，用12%25的边距替换填充以获得相同的效果，要么将元素的宽度(或最大宽度)更改为88%25。这发生在main.css的第343行。希望这能有所帮助！|831106|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

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:

<pre><code>.homepageconference .container {
padding-left: 12%;
}
</code></pre>

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!

blocks|key|831178|text|我也有同样的问题，所以我尝试了一些方法。其中一个方法似乎对我很有效--去掉宽度，并在body标签中添加一个浮动。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|831179|可能不适用于所有实例，但在我最近遇到的场景中，隐藏内容元素上的溢出是行不通的……|831180|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

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.

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

blocks|key|1046225|text|这是一个相当古老的问题，但我想我应该补充一下我的2分钱。我已经尝试了上面的解决方案，包括ghost+css，我一定会保存它以备将来使用。但这些在我的情况下都不管用。下面是我修复问题的方法。希望这能对其他人有所帮助。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1046226|打开检查器(或任何您喜欢的)，从body标签中的第一个div开始，仅向该元素添加display:+none;。如果滚动条消失，您就知道该元素包含导致问题的元素。然后，删除第一个css规则并下一层进入包含元素。将css添加到该div，如果滚动条消失，您就知道是该元素引起的，或者包含有问题的元素。如果添加CSS没有任何作用，您就知道不是那个div导致了问题，或者是容器中的另一个div引起了问题，或者是容器本身引起了问题。|offset|length|style|CODE|1046227|对于某些人来说，这可能太耗时了。对我来说幸运的是，我的问题在页眉，但我可以想象，如果你的问题是在页脚或其他地方，这需要一些时间。|1046228|entityMap^0|0|14|E|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@$D|N|E|O|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|P|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|K|$]]

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. 

Open inspector (or whatever your preference) and starting with the first div in body tag, add <code>display: none;</code> 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. 

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.

blocks|key|831292|text|overflow-x:+hidden;非常适合我。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|831293|entityMap^0|0|J|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

<code>overflow-x: hidden;</code> works perfect for me.

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. 

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 <a href="http://www.visibleequity.com" rel="noreferrer">look at our site on FireFox</a> to see what I mean.

White space showing up on right side of page when background image should extend full length of page

容器

我们的网页背景图片在iPad/iPhone上的FireFox和iOS中的Safari都有问题，页面右侧显示空白。背景图像在其他浏览器上扩展得很好，但我们很难在这些浏览器上扩展整个浏览器的长度。拿一个来看看我的意思。

问当背景图像应扩展整个页面长度时，页面右侧显示空白
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当背景图像应扩展整个页面长度时，页面右侧显示空白EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当背景图像应扩展整个页面长度时，页面右侧显示空白
EN