在IE5.5至IE7 、Safari、chrome中,当浏览器窗口少于内容宽度时，居中的背景图片转向以body左对齐。而在Opera及FF中,居中的背景图片依然以缩小的窗口宽度居中对齐，当浏览器窗口宽度少于内容宽度时，拖动横行滚动条就能察觉到页面内容与背景会有错位的现象。A1_Demo

    从测试结果得知Opera及FF中的,浏览器窗口宽度少于内容宽度时,内容块以body 左对齐。这里有一个突破点是在于把body转变为具有内容板块的特性。

    

    按照CSS的解析，个人认为在Opera及FF中所显示的为正确效果,在IE5.5至IE7 、Safari、chrome中否则为错误的解析。但错误的解析正是我们所需要的，因为此能避免有内容与背景会有错位的现象。

解决方案

    下面方案针对Opera及FF,目的令背景图片向body左对齐

为定义display:table;及width:100%;属性。A2_Demo为定义display:inline-table;及width:100%;属性。A3_Demo

两种的方案缺点

body根据页面内容高度而撑高，当内容不足一屏幕高度时，body将来不显示余下高度的背景。A4_Demo

    为此需要给及定义height:100%;属性值,来解决问题。A5_Demo

建议继续学习：

1. 图片动态局部毛玻璃模糊效果的实现    (阅读：14315)
2. 淘宝图片存储架构    (阅读：10512)
3. 解决IE6从Nginx服务器下载图片不Cache的Bug    (阅读：7841)
4. When we`re only No.2, we try harder之聊天表情设计小探讨    (阅读：6912)
5. 精于图片处理的10款jQuery插件    (阅读：6902)
6. 通过php+imagick 创建PDF图片预览    (阅读：6611)
7. phpThumb:强大的缩微图类    (阅读：6223)
8. js实现预加载图片让图片快速显示    (阅读：5771)
9. 利用开源的Gearman框架构建分布式图片处理平台[原创]    (阅读：4860)
10. 使用数据库存放图片    (阅读：4728)