Question

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

这是我到目前为止所确认的内容。其他css文件似乎没有与＆lt; ul＆gt;或者＆lt; li＆gt;可能是重写设置。另一个确认是，这在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差异之一。

我的建议是使用重置样式表，并将树图标设置为其容器的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＆gt; LI组合来做始终这类事情。因人而异。您可以使用UL＆gt; LI执行相同的操作，但我不喜欢子弹放置位置的差异等，如果您仍然使用重置样式表，您只需将LI容器转换为类似DIV的东西反正。

Answer 2

您的标记有一些错误，因此浏览器如何生成DOM。

ul只能li为孩子，而非div或其他ul。修复标记，看看会发生什么。

Answer 3

当我使用overflow时，我一直遇到firefox的问题：隐藏在我的列表中。尝试取出溢出：隐藏，看看是否会改变一切。

对于我的问题，如果我使用溢出隐藏，那么它会导致我的有序列表不显示他们的A.，B.，C。或1.，2.，3。等...（将其变成无序列表，没有子弹）

Answer 4

没有测试，但这可能与FF使用边距设置子弹标记而IE使用填充这一事实有关。或者是周围的其他方式？忘记。

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

4 个答案: