1

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

这是我到目前为止所确认的。其他 css 文件中似乎没有与 <ul> 或 <li> 可能覆盖设置的冲突。另一个确认是，这在 Internet Explorer 中运行良好......因此我一定是个白痴，因为它通常是相反的（在 FF 中工作，但在 IE 中失败）。

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

替代文字 http://www.redsandstech.com/ie_works.jpg

这是它在 FF 中的外观（注意文件夹图标没有与其相应的文本一起被按下）。
替代文字 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>
4

4 回答 4

2

您遇到了 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 的东西反正。

于 2010-04-13T17:51:12.957 回答
1

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

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

于 2010-04-13T18:33:16.617 回答
0

当我在我的列表中使用溢出：隐藏时，我遇到了 Firefox 的问题。尝试取出溢出：隐藏，看看是否会改变事情。

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

于 2010-08-02T10:00:11.337 回答
0

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

于 2010-08-02T13:20:38.453 回答