Question

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

继承我的名单：

<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>

Answer 1

我是这样解释您的问题的：

当您使用 CSS 将列表更改为顶级导航时，您不需要项目符号或编号列表。您的具体问题是 IE 中的有序列表未显示数字（仅 1 或无），但是，当用户单击导航将其展开时。
当您的 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>

<ol>显示1,1,1,1而不是IE中的1,2,3,4（尝试列表项）</ol>

1 个答案: