浏览器对居中的背景图片的兼容性
浏览:2702次 出处信息
在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
建议继续学习:
- 图片动态局部毛玻璃模糊效果的实现 (阅读:13496)
- 淘宝图片存储架构 (阅读:9643)
- 解决IE6从Nginx服务器下载图片不Cache的Bug (阅读:6960)
- When we`re only No.2, we try harder之聊天表情设计小探讨 (阅读:6444)
- 精于图片处理的10款jQuery插件 (阅读:6060)
- phpThumb:强大的缩微图类 (阅读:5403)
- js实现预加载图片让图片快速显示 (阅读:4813)
- 利用开源的Gearman框架构建分布式图片处理平台[原创] (阅读:4181)
- 使用数据库存放图片 (阅读:4073)
- 通过php+imagick 创建PDF图片预览 (阅读:3702)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
扫一扫订阅我的微信号:IT技术博客大学习
<< 前一篇:缩小窗口<body>背景被裁掉
后一篇:浮动引起的文本重影 >>
文章信息
- 作者:Gulu77 来源: Gulu77
- 标签: 图片 背景
- 发布时间:2009-11-08 23:07:57
建议继续学习
近3天十大热文
- [117] Go Reflect 性能
- [20] [译]Google Chrome中的高性能网
- [17] 在FreeNAS/BSD搭建基于Nginx+
- [16] 关于Linux的文件系统cache
- [14] Linux常用系统信息查看命令
- [14] 最近总结的一些技巧(vim,python,s
- [12] PHP加速器 eaccelerator 缓存
- [11] 精于图片处理的10款jQuery插件
- [11] 什么是DNS劫持和DNS污染?
- [10] nginx.conf控制指定的代理ip和ip