其实这个问题之前出现过，也已经处理了；今天在检查其他页面的时候，又出现了，主要是在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，有兴趣的朋友可以一起研究下~