0

我有一个有序列表，其中任何版本的 Internet Explorer 都选择为 1、1、1、1 而不是 1、2、3、4。在阅读完此内容后，会出现这种情况，因为在 li 上设置了宽度，您需要添加 'display: list-item;' 到 li 让它工作 - 我试过没有结果，我也试过完全删除宽度，但同样的问题。

这是我的清单：

<div id="nav">
<ul>
    <li><a href="/">Home</a></li>
    <li>
        <a href="#">New Products</a>
        <ol class="newProducts">
            <li><a href="#"><span>Link 1</span></a></li>
            <li><a href="#"><span>Link 2</span></a></li>
            <li><a href="#"><span>Link 3</span></a></li>
            <li><a href="#"><span>Link 4</span></a></li>
            <li><a href="#"><span>Link 5</span></a></li>
            <li><a href="#"><span>Link 6</span></a></li>
            <li><a href="#"><span>Link 7</span></a></li>
            <li><a href="#"><span>Link 8</span></a></li>
        </ol>
    </li>
    <li><a href="news.html">News</a></li>
    <li><a href="payment-and-shipping.html">Payment &amp; Shipping</a></li>
</ul></div>

这是我的CSS：

<pre>
#nav ul, #nav ol {
position: absolute;
top: 158px;
    left: 0px;
    list-style: none;
    text-transform: uppercase;
}

#nav ul > li {
    float: left;
    padding: 10px;
    border-right: 2px solid #000000;
    font-size: 16px;
    position: relative;
}    

#nav ul > li:hover {
    background: url(../images/headerHover.png) bottom no-repeat;
    padding-bottom: 10px;
}    

#nav ul > li a {
    color: #FFFFFF; 
}

#nav ul > li > ol {
    display: none;
}

#nav ul > li:hover ol {
    margin-top: -120px;
    left: 0px;
    display: block;
    padding-top: 7px;
    list-style: decimal outside;
    font-size: 10px;
    color: #fdc800;
    font-family: Arial, Helvetica, sans-serif;
    display: block;
    text-transform: none;
}    

#nav ul > li:hover ol > li {
    text-align: left;
    padding: 0px 0px 5px 0px;
    width: 240px;
    border: 0px;
}    

#nav ul > li:hover ol > li:hover {
    background: none;   
}

#nav ul > li:hover ol > li a {
    color: #FFFFFF;
    text-decoration: none;
}    
</pre>
4

1 回答 1

0

这就是我解释您的问题的方式：

  1. 当您使用 CSS 将列表更改为顶级导航时，您不需要项目符号或编号列表。您的具体问题是有序列表在 IE 中未显示数字（仅 1 或无），但是，当用户单击导航以展开它时。
  2. 当您的 CSS 在某些较旧的 IE 浏览器（如 IE5）中失败时，您确实希望列表也返回到编号的垂直列表。目前，它在 IE5 中不显示列表编号。

那是对的吗？

首先，要实现这一点，您必须从 CSS 中删除“list-style:none”，这会破坏<ul>和<ol>列表项。它们不再使用该 CSS 声明作为有序或无序列表执行。这就是从所有 IE 浏览器中显示的列表中删除“数字”的原因。通过删除该属性，数字现在将与项目符号一样显示。

其次，IE5 和更早版本的浏览器不知道子选择器是什么 ( ul > li)，因此您可以安全地使用该 CSS 规则对 IE6 或更高版本的浏览器隐藏项目符号和数字，并让 IE5 或更早版本的浏览器返回显示其 1 的有序列表格式， 2., 3. 等数字正常。因此，要解决此问题，请进行如下所示的更改：

<style>
#nav ul, #nav ol {
  /* Hide this and let your lists return to being lists again */
  /*list-style: none;*/
}

#nav ul > li {
  /* Now hide the numbers and bullets from IE6 or greater which are able to be a navigation banner and do not need to shows list numbers or bullets */
  list-style-type: none;
}
</style>
于 2021-04-29T18:48:46.857 回答