Question

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

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/

处的工作示例

Answer 2

呃哦，期待IE7“打嗝”而不是FF4 :(

IE7是一个haslayout问题，众所周知它不能编号列表（有时甚至无法放置普通的子弹）

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

溢出有序列表不会递增

2 个答案:

检查http://jsfiddle.net/DCgq3/62/