css，无序表不显示图标，在正确的地方

StackOverflow https://stackoverflow.com/questions/2631843

  •  26-09-2019
  •  | 
  •  

题

我真的很沮丧。几个星期前，我得到了它的工作在这两个火狐，即就好了。又回今天要做一些测试并发现了一个问题，显示在火狐，我一直在寻找的代码，但找不到任何东西。我可以使用一些技巧，从任何愿意，我肯定我在寻找错误的东西。我升级了我的火狐版本，但我想我的代码是破产了，没有firefox。我假设的问题是什么地方，在我的css文件，但我不肯定。

这是我们确认为止。那似乎不是冲突的其他css文件 < ul>'s或 < 李>的可能是压倒一切的设置。其他确认的是，这一工作现在Internet Explorer...因此我必须要一个白痴，因为其通常是周围的其他方法(工作中FF，但未能在IE)。

这里是它看起来如何在即(请注意位置的图标文件夹旁边的文本):

alt文本http://www.redsandstech.com/ie_works.jpg

这里是它看起来如何在FF(请注意文件夹中的图标不被推下与其相应的文本)。
alt文本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>
有帮助吗？

解决方案

你已经遇到的一个最大和最令人沮丧的CSS之间的差异即和其他浏览器。

我的建议是用一个复位的样式表，并式树图标为backgroundImages他们的容器。

例如，一个你的树项目可能

<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>李组合。情况因人而异。你可以做同样的事情UL>李，但我不喜欢的差异在那里的子弹放置，等等， 如果您使用的复位的样式表无论如何，你是简单地转换李箱，类似的东西DIV无论如何。

其他提示

你的标记有一些错误，因此它是浏览器如何产生DOM。

ul 只能有 li 为儿童，不 div 或者另一个 ul.修正的标记，看看会发生什么情况。

我一直有的问题有firefox当我使用溢出：隐藏在我的名单。尽量取出溢出：隐藏的和看到的，如果变化的事情。

我的问题，如果我使用溢出隐藏，然后它会导致我的命令列出了以不显示出他们的A.，B.，C.1., 2., 3.等等...(把它变成一个无序列表中，没有子弹)

没有测试但是，这可能需要做的事实，FF使用保证金来设置的弹痕的话，即采用填充。或是其他方式吗？忘了。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top