当背景图像应延伸页面的全长时,在页面右侧显示的空白区域

Question

我们的网页背景图片在FireFox以及iPad/iPhone上的iOS中存在问题,页面右侧显示空白区域.

背景图片在其他浏览器上可以很好地扩展,但我们很难在这些浏览器上扩展浏览器的全长.

快来看看我们的火狐网站,看看我的意思.

Answer 1

我补充说:

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

进入你的CSS高于其他类的顶部,它似乎解决了你的问题.

您可以在此处获得更新的.css文件

Answer 2

调试CSS的Ghost CSS元素.

使用此书签调试您的CSS:http://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 Button导致了这个问题.

Answer 3

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

}

如果对任何人来说这看起来不正确,请哼我

Answer 4

这是一个非常古老的问题,但我想我会增加2美分.我已经尝试了上面的解决方案,包括ghost css,我肯定会将其保存以备将来使用.但这些都不适用于我的情况.以下是我解决问题的方法.希望这会帮助别人.

打开检查器(或任何您的偏好)并从body标签中的第一个div开始,添加display: none;到该元素.如果滚动条消失,您知道该元素包含导致问题的元素.然后,删除第一个css规则并向下一级进入包含元素.将css添加到该div,如果滚动条消失,您知道该元素要么导致,要么包含有问题的元素.如果添加CSS什么都不做,你知道不是导致问题的那个div,并且容器中的另一个div导致它,或容器本身导致它.

这可能对某些人来说太耗时.幸运的是,我的问题出现在标题中,但我可以想象,如果您的问题是在页脚或其他内容中说出来的话会花费一些时间.

Answer 5

overflow-x: hidden; 适合我.

Answer 6

问题出在文件中:

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中,它是导致问题的第一行.