我在这个网站有一个渲染错误,我没有看到其他地方.该网站呈现在所有现代浏览器中,并且验证正常,但我无法弄清楚为什么它不显示完整的背景图像(见下面的屏幕截图).我正在使用雅虎CSS重置,背景图像在身体中声明如下：
background: url("back.jpg") #033049;
您也可以访问网站：http://xaviesteve.com/
让我知道如果我应该提供更多的细节.
任何帮助/提示不胜感激,谢谢.
编辑
我发现很少有人在互联网上报道这个问题：
>另一个SO问题：White space showing up on right side of page when background image should extend full length of page建议应用overflow-x：隐藏,但是它会影响网站.
>在iPad论坛：http://www.ipadforums.net/ipad-development/9954-mobile-safari-doenst-show-background-image-when-page-slided-left.html没有回复
解
我一直在调查和尝试不同的方法来解决这个问题,发现将背景图像添加到< html>标签固定问题.希望这可以节省一些时间到其他开发者.
之前
body {background:url('images/back.jpg');}
后
html,body {background:url('images/back.jpg');}
解决方法
将样式移动到html元素可以正常工作,但还有其他修复方法.
这里发生的是最初的body元素根据视口大小而定.如果视口只有X像素宽,您的身体将只有X像素宽,即使包含的内容更宽.要解决这个问题,请给您的身体(或任何您附加的背景样式)以非百分比为基础的宽度或最小宽度适合您的内容.
通过缩小浏览器窗口和向右滚动,您实际上在桌面浏览器上遇到同样的问题. iPhone / iPad上的问题更加明显,因为默认情况下,Mobile Safari将视口设置为980像素,然后缩小,直到所有内容符合屏幕.
一个替代解决方案,我不推荐,因为它只适用于Mobile Safari,您可以使用以下方式设置视口宽度：
<Meta name = "viewport" content = "width = 1080">
Apple’s Developer Docs的更多信息.
