技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置首页 --> CSS/HTML --> 浏览器对居中的背景图片的兼容性

浏览器对居中的背景图片的兼容性

浏览:2772次  出处信息

    在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. 图片动态局部毛玻璃模糊效果的实现    (阅读:13592)
  2. 淘宝图片存储架构    (阅读:9840)
  3. 解决IE6从Nginx服务器下载图片不Cache的Bug    (阅读:7101)
  4. When we`re only No.2, we try harder之聊天表情设计小探讨    (阅读:6511)
  5. 精于图片处理的10款jQuery插件    (阅读:6223)
  6. phpThumb:强大的缩微图类    (阅读:5462)
  7. js实现预加载图片让图片快速显示    (阅读:4963)
  8. 利用开源的Gearman框架构建分布式图片处理平台[原创]    (阅读:4262)
  9. 使用数据库存放图片    (阅读:4187)
  10. 通过php+imagick 创建PDF图片预览    (阅读:3794)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
© 2009 - 2024 by blogread.cn 微博:@IT技术博客大学习

京ICP备15002552号-1