有序列表在IE7上无法正常显示(<ol><li>)。

5

我已经在我的代码上完成了它们,抱歉这只是一个例子。我现在会进行更正。谢谢。 - Amra
问题是我看不到数字 :-(。 - Amra
7个回答

9

这个 SSCCE 可以在所有浏览器中正常运行,包括IE6及以上版本(IE6/7/8,FF2/3,Safari3,Chrome4,Opera9)。

<!doctype html>
<html lang="en">
    <head>
        <title>SO question 2401705</title>
    </head>
    <body>
        <ol>
            <li>Item 1
            <li>Item 2
        </ol>
    </body>
</html>

即使我试图用语法上无效的<ol>替换</ol>,它甚至也能正常工作。因此,你的问题可能出在其他地方。你真的需要更详细地阐述“不起作用”的情况。到底发生了什么?到底没有发生什么?最好编辑你的问题,包括一个SSCCE(如上所示),并尝试以聪明的方式提问。
请注意,与其他人说的相反,在普通HTML中,非关闭的<li>是语法上有效的。在XHTML中确实无效,但除非你使用基于组件的MVC框架或其他基于XML的工具生成HTML页面,否则我看不出使用XHTML的任何理由。 更新:因此,你看不到数字。显然,你已将olmargin设为零。这样它们就会超出视野范围。以下SSCCE演示了这一点。它确实在IE6/7中失败了。
<!doctype html>
<html lang="en">
    <head>
        <title>SO question 2401705 - IE6/7 problem</title>
        <style>ol { margin: 0; }</style>
    </head>
    <body>
        <ol>
            <li>Item 1
            <li>Item 2
        </ol>
    </body>
</html>

不要将边距设置为0。这可能也是所谓的CSS重置表所导致的。不要使用它们,只需记住为所有块元素指定边距即可。


1
谢谢,我没想起重置表,你说得对,它们很危险。 :-) +1。 - Amra
3
只有当你不理解它们的作用时,它们才会变得危险 :) - Olly Hodgson

5

在IE7中,为了看到有序列表的数字,您可能还需要给该列表添加margin-left。请尝试以下方法:

<ol style="margin-left:25px;"> 
 <li>test1</li> 
 <li>test2</li> 
</ol>

3

如果你根本看不到数字,很可能需要在ol元素上设置边距或填充,例如:

ol {
    margin-left: 3em;
}

你可能还需要设置list-style: decimal;

在旧版本的IE中,也存在一些CSS错误,可能会对有序列表产生奇怪的影响。症状通常是每个项目计数器都会重置为1。你是否遇到了这种情况?


2
完成您的标签,一切都会正常的:
<ol>
 <li>blah</li>
 <li>ha</li>
</ol>

1

请确保关闭您的<li>标签:

<ol>
  <li>first thing</li>
  <li>second thing</li>
</ol>

我曾经认为在HTML中</li>是可选的(尽管在XHTML中显然不是)。 - Olly Hodgson
原始问题的细节有点少 :-) - Pointy

1

这个问题很老了,但我觉得没有一个答案解决了我的情况:

ol {list-style-position:inside;}
li {display:list-item;}

<ol>
   <li>foo</li>
   <li>bar</li>
</ol>
  • list-style-position: inside 
    

    将列表修复,使数字显示在内部(不使用边距)

  • display:list-item
    

    当列表元素具有宽度或布局时(?我忘了),IE7存在编号错误,所有列表元素都显示为1.;这个修复了那个问题。


0
我也偶然遇到了这个老问题。对我来说,解决办法是删除我在ol标签上使用的float:left声明。我把代码贴在这里,以防有人发现它有用。
可以复现IE7行为的示例代码:
<!doctype html>
<html lang="en">
    <head>
        <title>SO question 2401705 - IE6/7 problem</title>
    <style type="text/css">ol { float:left; }</style>
</head>
<body>
    <ol>
        <li>Item 1</li>
        <li>Item 2</li>
    </ol>
</body>


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接