时间戳

首页 > 解决方案 > 当有计数器重置声明时，Firefox 是否违反了规范，因为它奇怪地累积应用计数到 LI 标记？

html - 当有计数器重置声明时，Firefox 是否违反了规范，因为它奇怪地累积应用计数到 LI 标记？

问题描述

通常当 CSS 计数器用于列表时，OL list-style-type 设置为 none 并且 ::before 伪元素用于代替真正的列表标记。

但是，我注意到在 Firefox（69.0，target:x86_64-apple-darwin，在 MacOS Mojave 上运行）中，计数器重置的存在对实际的列表标记有些奇怪。考虑：

ol {counter-reset: some-counter;}
li::before {
  content: "Marker should be: " counter(some-counter) ".";
  counter-increment: some-counter;
}

ol.alpha {list-style-type:lower-alpha;}
ol.alpha > li::before{content: "Marker should be: " counter(some-counter, lower-alpha) ".";}
<h2>List A</h2>
<ol>
  <li>
    <ol>
      <li></li>
      <li></li>
      <li></li>
    </ol>
  </li>
  <li>
    <ol>
      <li></li>
      <li></li>
      <li></li>
    </ol>
  </li>
</ol>

<h2>List B</h2>
<ol>
  <li>
    <ol class="alpha">
      <li></li>
      <li></li>
      <li></li>
    </ol>
  </li>
  <li>
    <ol class="alpha">
      <li style="counter-reset: some-counter"></li>
      <li></li>
      <li></li>
    </ol>
  </li>
</ol>

Chrome 和 Safari 按预期呈现，但在 FF 中，列表 A 呈现为：

FF 结果 1

并且列表 B 呈现为：

在此处输入图像描述

换句话说，当遍历一个两级列表时，FF 会跟踪：

  1. 一个共享列表标记计数器，当它碰到第一层 LI 和任何嵌套在里面的 LI 时都会递增。
  2. 仅适用于外部列表的“some-counter”的计数器实例
  3. 仅适用于任何内部列表的“some-counter”的计数器实例

FF 的列表标记显示共享计数器（带有任何必要的转换，例如到上面列表 B 中的低 alpha），而 ::before 伪元素显示适合其级别的“some-counter”实例。

如果您注释掉计数器重置，FF 将返回到其标记中的预期行为。（即使设置“counter-reset:none”仍然会导致奇怪的行为。）

counter-reset:none;这是一个错误，还是有一些原因导致当计数器重置（偶数）应用于顶级时，列表标记中会有未定义的行为<ol>？

标签： htmlcssfirefoxhtml-listscss-counter

解决方案

这是有意的，有待规范说明。（此行为是为 Firefox 68 实现的。）

Firefox 让您的ol {counter-reset: some-counter}规则覆盖内置的 UA 样式，删除wrt 列表编号ol {counter-reset: list-item}的任何特殊含义。ol如错误中所述，您可以指定两个计数器 ( ol {counter-reset: some-counter list-item;}) 来解决此问题。

ol {counter-reset: some-counter list-item;}
li::before {
  content: "Marker should be: " counter(some-counter) ".";
  counter-increment: some-counter;
}

ol.alpha {list-style-type:lower-alpha;}
ol.alpha > li::before{content: "Marker should be: " counter(some-counter, lower-alpha) ".";}
<h2>List A</h2>
<ol>
  <li>
    <ol>
      <li></li>
      <li></li>
      <li></li>
    </ol>
  </li>
  <li>
    <ol>
      <li></li>
      <li></li>
      <li></li>
    </ol>
  </li>
</ol>

<h2>List B</h2>
<ol>
  <li>
    <ol class="alpha">
      <li></li>
      <li></li>
      <li></li>
    </ol>
  </li>
  <li>
    <ol class="alpha">
      <li style="counter-reset: some-counter"></li>
      <li></li>
      <li></li>
    </ol>
  </li>
</ol>

推荐阅读