css，无序列表未在正确位置显示图标

Question

我对这个真的很失望。几周前，我让它在 Firefox 和 IE 中都能正常工作。今天回去做一些测试，发现Firefox的显示有问题，我一直在搜索代码但找不到任何东西。我可以使用任何愿意的人提供的一些提示，我确定我看错了。我升级了我的 firefox 版本，但我想我的代码坏了，而不是 firefox。我假设问题出在我的 css 文件中，但我不确定。

这是我迄今为止所确认的。与可能覆盖设置的

或
• 的其他 css 文件似乎没有冲突。另一个确认是，这在 Internet Explorer 中运行良好......因此我一定是个白痴，因为它通常是相反的（在 FF 中工作，但在 IE 中失败）。

  这是它在 IE 中的外观（注意文件夹图标在文本旁边的位置）：

  alt text http://www.redsandstech.com/ie_works.jpg

  这是它在 FF 中的样子（注意文件夹图标没有与其相应的文本一起被按下）。
  alt text http://www.redsandstech.com/ff_broken.jpg

  这是无序列表：

  <ul id="nav">
      <li><a>Utah</a></li>
          <ul>
             <li><a>ParkCity</a>
                 <ul>
                    <li><a>Com1</a></li>
                        <ul>
                            <li class="folder_closed"><a>Timber</a></li>
                            <div>SQUARE CONTAINER IS INSIDE THIS DIV</div>
                        </ul>
                 </ul>
          </ul>
  </ul>
  

  这是用于整个菜单的 CSS：

  /*  MENU NAVIGATION (<UL><LI> LISTS
  ****************************************/
  ul#nav{
  /* This handles the main root <ul> */
      margin-left:0;
      margin-right:0;
      padding-left:0px;
      text-indent:15px;   
  }
  ul#nav div{
    overflow: hidden;
  }
  
  #nav li>a:hover { 
      cursor: pointer;
  }
  #nav li > ul{ 
  /* This will hide any element with an id of "nav" and an "li" that has a direct child that is a "ul" */
      display:none; 
      margin-left:0px; 
      margin-right:0px;
      padding-left:15px;
      padding-right:0px;
      text-indent:15px;
  }
  #nav li {
      list-style-type:none;
      list-style-image: none;
  }
  #nav > li{
      vertical-align: top;
      left:0px;
      text-align:left;
      clear: both;
      margin:0px;
      margin-right:0px;
      padding-right:0px;
  }
  .menu_parent{
      background-image: url(../images/maximize.png);
      background-repeat: no-repeat;
      background-position: 0px 1px; 
      position:relative;
  }
  .menu_parent_minimized{
      background-image: url(../images/minimize.png);
      background-repeat: no-repeat;
      background-position: 0px 1px; 
      position:relative;
  }
  .folder_closed{
      position:relative;
      background-image: url(../images/folder_closed12x14.png);
      background-repeat: no-repeat;
      background-position: 0px -2px; 
  }
  
  .folder_open{
      position:relative;
      background-image: url(../images/folder_open12x14.png);
      background-repeat: no-repeat;
      background-position: 0px -2px; 
  }
  </ul>
  

Answer 1

您遇到了 IE 和其他浏览器之间最大和最令人沮丧的 CSS 差异之一。

我的建议是使用重置样式表，并将树形图标设置为其容器的背景图像。

例如，您的树项目之一可能是

<div class="folder">This is a folder</div>

并具有以下 CSS：

.folder {
  background-image: url(someImage.png);
  background-repeat: no-repeat;
  background-position: 0 0; /* or wherever you like */
  text-indent: 20; /*enough room for a 16x16 icon with a little space to the right */
}

}

我总是使用 DIV，而不是 UL>LI 组合来做这种事情。 YMMV。你可以用 UL>LI 做同样的事情，但我不喜欢子弹放置位置等方面的差异，如果你仍然使用重置样式表，你只是将 LI 容器转换为类似于 DIV 的东西无论如何。