Thems style: Alpha 10% Alpha 30% Alpha 50% Alpha 70% Alpha 90%

one two three four five

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

8 Comments » Web Standards

在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左对齐

  1. 为<body>定义display:table;及width:100%;属性。A2_Demo
  2. 为<body>定义display:inline-table;及width:100%;属性。A3_Demo

两种的方案缺点

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

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

8 Responses to “浏览器对居中的背景图片的兼容性”

  1. poor 2008 十一月 20th at 17:14 Says:

    以前发现过，但没有去想这个解决方案，影响并不大。77给的解决方案不错，学习了！

  2. weilaixu 2008 十一月 20th at 18:48 Says:

    一直认为77是个好孩子！

  3. 木 黄 2008 十一月 21st at 12:14 Says:

    可怜的菜鸟木还没有遇到，给代码我拉～

  4. moomu 2008 十一月 23rd at 17:08 Says:

    display:table现在就可以用了吗？

  5. Gulu77 2008 十一月 24th at 13:02 Says:

    在没有更好的办法之前我建议可以尝试使用display:table

  6. mm 2008 十二月 12th at 16:22 Says:

    1.你这里的背景图片是指放在哪里的背景图片？我有点看不是很明白第一句话
    2.”在IE5.5至IE7 、Safari、chrome中,当浏览器窗口少于内容宽度时，居中的背景图片转向以body左对齐。”
    我怎么觉得这句话有点不确切，要看背景图片是放在什么样的容器中吧？
    3.在ie6、7 下：
    ×背景如果是放在相对body的宽度为100％的标签里，背景图片是相对于浏览器的窗口居中的，在浏览器窗口少于内容宽度时，也会出现文章中所说的错位的问题。
    4.×背景如果是放在固定宽度的标签里，才是转向以body左对齐。而且这个转向body左对齐也不是背景转向，而是所在标签转向，所以背景也转向
    5.×背景如果是放在body里面，在浏览器窗口少于内容宽度时，ie7同样也会出现错位的问题。 ie6则不会。
    回复mm
    1.所指的是body背景图片
    2.3.4 在此文章中注要针对body为解决事例,延伸的问题可参考页面元素的背景及boder被裁掉

  7. mm 2008 十二月 12th at 16:33 Says:

    呃，针对Opera及FF的解决方案很强大，学习了，呵呵

  8. chami 2009 六月 2nd at 21:22 Says:

    那如果以FF为标准应该怎样设置样式呢

Leave a Reply

« 缩小窗口<body>背景被裁掉  
IE6局部调用PNG32合并图片 »