TL;博士
不要命名你的柜台list-item
问题:
CSS 计数器比较容易理解、有据可查并且有很好的浏览器支持。
但是,我遇到了他们不理解的意外行为,我想知道为什么会发生这种情况。可能只是浏览器中的错误......</p>
在以下示例中,我们可以看到计数器按预期工作:
ol {
list-style-type: none;
counter-reset: list-counter;
}
ol>li {
counter-increment: list-counter;
}
ol>li:before {
content: counter(list-counter) '. ';
}
<ol>
<li>n</li>
<li>n</li>
<li>n</li>
<li>n</li>
</ol>
<ol>
<li>n</li>
<li>n</li>
<li>n</li>
</ol>
<ol>
<li>n</li>
<li>n</li>
</ol>
但是将计数器的标识符更改为 时list-item
,我们可以看到它在不同浏览器中的行为不同:
ol {
list-style-type: none;
counter-reset: list-item;
}
ol>li {
counter-increment: list-item;
}
ol>li:before {
content: counter(list-item) '. ';
}
<ol>
<li>n</li>
<li>n</li>
<li>n</li>
<li>n</li>
</ol>
<ol>
<li>n</li>
<li>n</li>
<li>n</li>
</ol>
<ol>
<li>n</li>
<li>n</li>
</ol>
虽然在 Chrome 和 Firefox 中它仍然按预期工作,但在 Edge 和 Internet Explorer 11 中它从 2 开始计数并以 2 递增,在 Safari 中它从 0 开始计数但仍以 1 递增。
例如,当注释掉该counter-reset
属性时,它变得更加奇怪。然后 Safari 正确计数,但 Chrome 从 2 开始计数。当注释掉counter-increment
Chrome 和 IE/Edge 时正确计数,尽管它们实际上应该显示 0。
在玩这个时,在不同的浏览器中还有更多奇怪的行为,而且只有当标识符是list-item
.
当我最初遇到这个问题时,我没有进一步调查的第一个假设是它至少与display
财产价值有关list-item
。正如 MDN 所说:
list-item 关键字使元素生成一个 ::marker 伪元素,其内容由其列表样式属性(例如项目符号点)指定,以及其自身内容的指定类型的主体框。
请参阅:https ://developer.mozilla.org/en-US/docs/Web/CSS/display-listitem
但由于我找不到任何进一步的文档,我想知道不同的供应商如何实现这样的类似错误......</p>
问题:
我真的很想念这里吗?规范中是否有标识符的保留字?有什么特别之处list-item
吗?
在 W3C 规范中,我找不到任何关于它的信息:
https://www.w3.org/wiki/CSS/Properties/counter-increment
https://www.w3.org/wiki/CSS/Properties/counter-reset
附加信息:
为了完整起见,这里是使用的版本:
- Chrome 70.0.3538.110 MacOS Mojave 10.14.1
- 铬 70.0.3538.110 Windows 10 17134.407
- 边缘 17.17134 Windows 10 17134.407
- 火狐 63.0.3 MacOS Mojave 10.14.1
- 火狐 63.0.3 Windows 10 17134.407
- Internet Explorer 11.407.17134.0 Windows 10 17134.407
- Safari 12.0.1 MacOS Mojave 10.14.1