问题:界面html代码如下,ol里面的内容需要事先隐藏,并给ol加上一个计数器,将该页面ol从隐藏变为显示时,序号全部为0或1,而不是递增序号,所有浏览器都是如此。
<ol id="nav-site" class="state-closed">;
<li ...><a ... >...</a></li>
...
</ol>
解决办法:
首先是查看计数器css属性counter-reset、counter-increment等的使用方法,发现如果使用 "display: none",则无法重置计数器。如果使用 "visibility: hidden",则可以重置计数器。猜想是不是display为none时计数器就失效,于是验证之,确实如此,那怎么办呢,该部分必须要隐藏啊。跟同事讨论交流,他的一些想法突然就启发了自己,计数器放在ol上于是跟随着一起被隐藏就失效了,如果在外面加一层<div>并加上计数器,该div不被隐藏,仅仅只是里面的ol隐藏而已,该计数器就用来对ol中的li进行计数,html代码如下:
<div id="navsiteol"><ol id="nav-site" class="state-closed">;
<li ...><a ... >...</a></li>
...
</ol></div>
css代码如下:
#navsiteol {
counter-reset: navsite-counter;
}
#nav-site a:before {
content: counter(navsite-counter) ".";
counter-increment: navsite-counter;
}
结果问题还真是解决了。