html - 溢出的有序列表不递增

Question

为什么当列表项 overflow hidden 时，有序列表不增加？这是一个简化的例子。我的实际应用程序需要 overflow hidden ，因为列表项有 float 子项。

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/

Answer 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/ 查看工作示例