IE6下背景捉迷藏问题

2010年3月2日 | 标签: , ,

其实这个问题之前出现过，也已经处理了；今天在检查其他页面的时候，又出现了，主要是在IE6浏览器下，很诡异。于是一个个的排查，终于发现问题的所在了。

下面先看一个简单的结构：

  1. <ul class="serviceExplain">
  2.   <li>一个很简单的结构，只是一个列表，每项前有个项目图标的背景图；</li>
  3.   <li>如果仅仅是这样，什么问题都没有。。。</li>
  4. </ul>

只是这样一个结构，再加上样式如下：

提示：你可以先修改部分代码再运行。

浏览显示没有任何问题，但一个网站的结构要复杂的多，有很多上下级包含与被包含着，接来下我们再增加一层结构。

  1. <div class="serviceSupport">
  2.     <ul class="serviceExplain">
  3.         <li>一个很简单的结构，只是一个列表，每项前有个项目图标的修饰图；</li>
  4.         <li>如果仅仅是这样，什么问题都没有。。。</li>
  5.     </ul>
  6.     <p>我是打酱油的。。。</p>
  7. </div>

样式书写如下：

提示：你可以先修改部分代码再运行。

再在IE6下浏览，奇怪的事情发生了，每个li的修饰图标消失了，不断刷新浏览器，时显示时不显示，仍然有这样的情况。只是增加了一层div结构，问题肯定出在这。

与width的定义应该没有关系，难道是background-image有冲突？去掉div中的背景图，无效；这就是剩下position:relative了，有这个属性是因为其子元素有需要绝对定位，那先去掉试试，绝了，去掉后显示正常！！这是为什么呢？如果说定义position:relative后div无法撑开，那其背景已经显示出了，不成立呀~还有如果定义页面中的p足够的高度，但向下拖动垂直滚动条，是ul部分被掩盖，然后在显示出来，这时候li标签的小图标也可以显示了，很奇怪。。。

产生的原因还有待于进一步分析，这应该是IE6的一个bug，目前想到的解决的方法：

  1. 1、直接去掉position:relative，可行性比较小；
  2. 2、给ul定义高度，撑开li就可以显示，但这样又不太灵活；
  3. 3、给ul也定义position:relative，相对来说这种方法最好，但不知道会不会对其子元素又产生其他的bug，有兴趣的朋友可以一起研究下~
发表评论 | Trackback
  1. 江西人事考试网
    2011年10月26日09:54
    回复 | 引用 | #1

    路过 :lol:

  2. 西安电动门
    2011年9月1日14:09
    回复 | 引用 | #2

    博主写得文章，不错哦！加油！

  3. 床上用品品牌
    2010年12月28日11:40
    回复 | 引用 | #3

    欢迎多来交流

  4. shauning
    2010年3月27日20:01
    回复 | 引用 | #4

    给.serviceExplain li加个zoom:1; 貌似能解决.

    • hzhjun
      2011年3月3日17:27
      回复 | 引用 | #5

      嗯，用zoom也是一种常用的触发IE浏览器haslayout的好方法，多谢朋友。

  5. 免费领取试用装
    2010年3月6日17:31
    回复 | 引用 | #6

    我的站在ie6下错位吗？麻烦楼主看看http://mmfree.cn 是内页

  6. afc163
    2010年3月5日20:01
    回复 | 引用 | #8

    前辈的博客很不错，从主题到内容，我刚刚建的个站，各方面经验都欠缺，没有什么链接流量，多多向你学习！

  7. afc163
    2010年3月5日19:58
    回复 | 引用 | #10

    我现在都是在ff下做好一个页面后深呼吸，然后打开ietester看看ie6下会有什么神奇的表现。前几天搞博客的时候还发现div浮动后导致margin-bottom变化的奇怪问题。。

  8. diyidu
    2010年3月4日18:58
    回复 | 引用 | #11

    恩，写得很有趣。呵呵。

  9. 濯焰鸟
    2010年3月4日01:20
    回复 | 引用 | #13

    看不懂啊看不懂

  10. 土狼妹妹
    2010年3月3日23:26
    回复 | 引用 | #14

    不同的浏览器，在解析博客时，有的会出现栏目错位的情况

    • hzhjun
      2010年3月4日09:20
      回复 | 引用 | #15

      多谢朋友提醒，我再检查下，是在什么浏览器下会出问题呢？

  11. 大圣孙悟空
    2010年3月3日19:17
    回复 | 引用 | #16

    我觉得可以定义为顶层，应该可以解决。

  12. 风舞清扬
    2010年3月3日18:45
    回复 | 引用 | #18

    我遇到个类似的问题，学习了

  13. 诗涵
    2010年3月3日18:41
    回复 | 引用 | #19

    已经抛弃了IE6

  14. 济南seo
    2010年3月3日16:34
    回复 | 引用 | #20

    博客写的不错啊 模板很漂亮啊 继续加油啊 兄弟支持你 O(∩_∩)O哈哈~回踩谢谢 济南seo（www.51on.org）

    • hzhjun
      2010年3月4日09:13
      回复 | 引用 | #21

      多谢朋友的支持，楼下就有和你同城的同行业的朋友，真巧啊~

  15. 风云春秋博客
    2010年3月3日15:35
    回复 | 引用 | #22

    IE6貌似洞洞多啊

  16. 济南网站优化
    2010年3月3日15:33
    回复 | 引用 | #23

    博客写的不错啊 继续努力啊 O(∩_∩)O哈哈~兄弟帮你踩博客了 回踩啊 谢谢 济南网站优化(www.jn-seo.com)

  17. 卢松松
    2010年3月3日11:35
    回复 | 引用 | #25

    IE6的用户还是多数啊

  18. 莫矮水北
    2010年3月3日10:33
    回复 | 引用 | #26

    我们公司的客户，主要用IE6，最杯具… :cry:

  19. 园子
    2010年3月2日18:26
    回复 | 引用 | #27

    IE6 应该被抛弃了。