TL;DR
不要为您的柜台命名list-item
Issue:
CSS计数器比较容易理解,嗯有记录的 http://%20https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters并有良好的浏览器支持 https://caniuse.com/#feat=css-counters.
然而,我遇到了他们意想不到的行为,我不明白,我想知道为什么会发生这种情况。可能只是浏览器中的错误......
在下面的示例中,我们可以看到计数器按预期工作:
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
伪元素,其内容由其列表样式属性指定
(例如要点)连同主框
为其自身内容指定类型。
See: https://developer.mozilla.org/en-US/docs/Web/CSS/display-listitem https://developer.mozilla.org/en-US/docs/Web/CSS/display-listitem
但由于我找不到任何关于此的进一步文档,我想知道不同的供应商如何实现这样的类似错误......
问题:
这里有我真正想念的东西吗?规范中是否有标识符的保留字?有什么特别之处吗list-item
?
在 W3C 规范中我找不到任何相关内容:
https://www.w3.org/wiki/CSS/Properties/counter-increment https://www.w3.org/wiki/CSS/Properties/counter-increment
https://www.w3.org/wiki/CSS/Properties/counter-reset https://www.w3.org/wiki/CSS/Properties/counter-reset
附加信息:
为了完整起见,这里是使用的版本:
- Chrome 70.0.3538.110 MacOS 莫哈韦 10.14.1
- Chrome 70.0.3538.110 Windows 10 17134.407
- 边缘 17.17134 Windows 10 17134.407
- 火狐 63.0.3 MacOS 莫哈韦 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 莫哈韦 10.14.1