Edge与Firefox中<dl>标签编号差异原因及<dd>计数重置方法

差异原因 #

Firefox和Edge对display: list-item元素的默认计数器处理逻辑不一样：

• Firefox会让所有设为display: list-item的元素共享同一个全局默认计数器，前面<ul>里的3个<li>会把计数器值累加到3，后面<dl>里的<dd>就从4开始计数；
• Edge则会为不同容器下的列表项元素（比如<ul>里的<li>和<dl>里的<dd>）维护独立的默认计数器，所以<dd>的计数会从1重新开始。

解决方法 #

别依赖浏览器的默认计数器，自定义专属计数器并手动控制初始化和递增：

修改后的代码 #

CSS

dl {
  /* 初始化自定义计数器，默认从0开始 */
  counter-reset: dd-counter;
}

dd {
  display: list-item;
  list-style-position: inside;
  /* 去掉默认编号样式，改用自定义计数器生成编号 */
  list-style-type: none;
  /* 递增自定义计数器 */
  counter-increment: dd-counter;
}

dd::before {
  /* 显示自定义计数器的值 */
  content: counter(dd-counter) ". ";
}

HTML

<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ul>
<dl>
  <dt>Title</dt>
  <dd>One</dd>
  <dd>Two</dd>
  <dd>Three</dd>
</dl>

这样修改后，不管有没有前面的<ul>，Firefox里的<dd>都会从1开始编号，同时也能和Edge保持一致的显示效果。

内容的提问来源于stack exchange，提问作者JackFan