【解決済み】olタグを入れ子にした時、Firefoxで番号がうまく動かなかった

ググっても出てこなかったのでメモ。

おこったこと

利用規約とかでこういうのを書いていた。
<ol> タグが入れ子になっている。

<h2>第5条 免責事項および損害賠償</h2>
<ol class="bracket-num">
  <li>
    当社の債務不履行または…
    <ol class="latin">
      <li>本サービスを通じて、会員間、会員または…</li>
      <li>本サービスを通じて入手した役務、情報が…</li>
      <li>本サイトから…</li>
    </ol>
  </li>
  <li>
    ...
  </li>
</ol>

期待される表示は以下のようなもの。

第5条 免責事項および損害賠償

(1) 当社の債務不履行または…
  a. 本サービスを通じて、会員間、会員または…
  b. 本サービスを通じて入手した役務、情報が…
  c. 本サイトから…
(2) ....
  a. ...
  b. ...
(3) ...

(1) のような項番は <ol> タグの list-style では指定できない。
そのため、cssの counter 機能を使って以下のように装飾している。

.latin > li {
  list-style: lower-latin;
}

ol {
  counter-reset: ol-counter;
}

.bracket-num > li {
  counter-increment: ol-counter;
}

.bracket-num > li::before {
  content: '(' counter(ol-counter) ') ';
}

(counter機能の説明は👇を読んでほしい)

タグをcssで装飾する

このcssによって、Chromeでは期待通りの表示になったが、
Firefoxでは以下のような表示になってしまった。

第5条 免責事項および損害賠償

(1) 当社の債務不履行または…
  b. 本サービスを通じて、会員間、会員または…
  c. 本サービスを通じて入手した役務、情報が…
  d. 本サイトから…
(2) ....
  f. ...
  g. ...
(3) ...

親の <ol> の番号の進みを、子の <ol> が引き継いでいる気がする。

こうしたら直った

(1) の番号を、各<ol> ごと1に戻すために指定していた counter-reset を外したら直った。

ol {
  /* このぶぶん */
  counter-reset: ol-counter; 
}

counter を利用していない他の <ol> （.latinとか） には影響しない認識だったので、
横着して <ol> 自体に counter-reset を記述していたけれど、
firefoxではうまく動かないらしい。

とはいえ counter-reset がないと (1)の数字が無限に増え続けてしまうので、
counter を利用している要素にだけ効くように修正。

.bracket-num {
  counter-reset: ol-counter;
}

.bracket-num > li {
  counter-increment: ol-counter;
}

.bracket-num > li::before {
  content: '(' counter(ol-counter) ') ';
}

無事、なおりました！

結論

• cssの counter を使うときにはfirefoxに注意