溢出的有序列表不增加答案

【问题标题】：Overflown ordered list does not increment溢出的有序列表不增加
【发布时间】：2011-07-21 18:25:48
【问题描述】：

当列表项隐藏溢出时，为什么有序列表不增加？这是一个简化的例子。我的实际应用程序需要隐藏溢出，因为列表项有浮动子项。

HTML

<ol>
    <li>uno</li>
    <li>dos</li>
    <li>tres</li>
</ol>

CSS

ol li {
    list-style: decimal inside none;
    overflow: hidden;
}

输出（Firefox 4）

0. uno
0. dos
0. tres

输出（Internet Explorer 7）

1. uno
1. dos
1. tres

输出（Chrome、Internet Explorer 8）

1. uno
2. dos
3. tres

实例

http://jsfiddle.net/tokyotech/DCgq3/

【问题讨论】：

有趣。这个问题是大约 7 个月前在 Mozilla 论坛上提出的。那里有人要求用户在这个网站上问它！所以看起来很多人都有这个问题，可能是一个Mozilla错误。 support.mozilla.com/sr-CYRL/questions/743744

标签： html css

【解决方案1】：

ol {
    margin: 0 0 1em 0;  
    counter-reset: item;
}

ol li {
    list-style: decimal inside none;
    background: pink;
    display:inline-block;
    border-bottom: 3px dotted #000;       
    margin-left: 1em;
}

ol li div {
    background: #999;
    width: 20em;
    height: 2em;
    margin: 0.2em;
}


li:before {
    display: inline-block;
    content: counter(item);
    counter-increment: item;    
    width: 2em;
    margin-left: -1em;
}

在http://jsfiddle.net/DCgq3/62/查看工作示例

【讨论】：

您不需要display: list-item。一旦您删除 overflow: hidden 属性，它就会开始在 FF 中工作。不知道为什么 FF 会这样。可能是某种错误。
每个<li> 都需要扩展浮动子元素的动态数量，所以我确实需要在<li> 上溢出。
即使你有浮动的孩子，也没有理由在 ul 和 li 上都使用溢出。如果您在 jsfiddle 上发布代码并指出为什么需要在 li 上溢出，这将有所帮助。否则我提供的解决方案是我看到的唯一可用的解决方案。
jsfiddle.net/tokyotech/DCgq3/61 - 这是我需要<li> 溢出的地方。每个<li> 中有任意数量的浮动元素。如果<li> 没有overflow:hidden，那么border-bottom 就不会出现在正确的位置。出现的另一个问题是编号现在已经跳到了FF4的右边缘。
这个解决方案不会修复 IE7，因为它不理解 :before。我还需要背景来包含编号。请参阅我的旧问题：stackoverflow.com/questions/5225965/…。不过感谢您的努力。似乎这是一个棘手的问题。

【解决方案2】：

嗯，哦，期待 IE7 “打嗝”，但不是 FF4 :(

IE7 是一个 haslayout 问题，出了名的是它不能给列表编号（有时甚至很难放一个简单的项目符号）

为什么FF4我不知道，去看看

【讨论】：