IT技术博客大学习 共学习 共进步
全部 移动开发 后端 数据库 AI 算法 安全 DevOps 前端 设计 开发者

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

Gulu77 2009-11-08 23:07:57 累计浏览 3,806 次
本机暂存

    在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. translateZ() (2026-06-25 21:18:56)
  2. translateY() (2026-06-25 21:17:56)
  3. translateX() (2026-06-25 21:16:01)

查看更多 前端 文章 →

建议继续学习

  1. 程序员技术练级攻略 (累计阅读 35,472)
  2. 50个活力和动感的网页设计-颜色的灵感 (累计阅读 34,442)
  3. 视觉设计前瞻实用性研究(PNVD) 第二期 (累计阅读 12,977)
  4. 各公司对前端开发的职位描述 (累计阅读 10,405)
  5. iframe大小自适应 (累计阅读 10,057)
  6. Hello! 404 (累计阅读 9,385)
  7. 浏览器的渲染原理简介 (累计阅读 8,377)
  8. 解决IE6从Nginx服务器下载图片不Cache的Bug (累计阅读 8,357)
  9. iframe里src="about:blank"的问题。 (累计阅读 8,089)
  10. 优雅绝妙的Javascript跨域问题解决方案 (累计阅读 8,067)