浏览器对居中的背景图片的兼容性
浏览:2762次 出处信息
在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
建议继续学习:
- 图片动态局部毛玻璃模糊效果的实现 (阅读:13578)
- 淘宝图片存储架构 (阅读:9812)
- 解决IE6从Nginx服务器下载图片不Cache的Bug (阅读:7082)
- When we`re only No.2, we try harder之聊天表情设计小探讨 (阅读:6500)
- 精于图片处理的10款jQuery插件 (阅读:6207)
- phpThumb:强大的缩微图类 (阅读:5455)
- js实现预加载图片让图片快速显示 (阅读:4934)
- 利用开源的Gearman框架构建分布式图片处理平台[原创] (阅读:4247)
- 使用数据库存放图片 (阅读:4179)
- 通过php+imagick 创建PDF图片预览 (阅读:3775)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
扫一扫订阅我的微信号:IT技术博客大学习
<< 前一篇:缩小窗口<body>背景被裁掉
后一篇:浮动引起的文本重影 >>
文章信息
- 作者:Gulu77 来源: Gulu77
- 标签: 图片 背景
- 发布时间:2009-11-08 23:07:57
建议继续学习
近3天十大热文
- [67] Go Reflect 性能
- [66] Oracle MTS模式下 进程地址与会话信
- [63] 如何拿下简短的域名
- [61] android 开发入门
- [60] 【社会化设计】自我(self)部分――欢迎区
- [59] IOS安全–浅谈关于IOS加固的几种方法
- [59] 图书馆的世界纪录
- [54] 视觉调整-设计师 vs. 逻辑
- [49] 读书笔记-壹百度:百度十年千倍的29条法则
- [48] 界面设计速成