css - 具有动态子元素的 Css 嵌套计数器

Question

我在嵌套菜单中使用 css 计数器。并且由于 chrome 65 开始出现奇怪的错误。基本上，当子菜单项以动态方式出现时，计数器开始泄漏到父级的兄弟元素。

<style>
  ul {
    counter-reset: test;
  }

  ul li::before {
      counter-increment: test;
      content: counters(test, ".") " ";
  }
</style>

<button onclick="document.getElementById('submenu').style.display='none';">HIDE</button>
<button onclick="document.getElementById('submenu').style.display='block';">SHOW</button>

<ul>
  <li>aaaa
    <ul id="submenu" style="display:block;">
      <li>one</li>
      <li>two</li>
      <li>three</li>
    </ul>    
  </li>
  <li>bbbb</li>
  <li>cccc</li>
</ul>

https://jsfiddle.net/6ouvzhvd/14/

初始打开页面时看到一个计数器，这是正确的：

这就是它在动态出现时的样子（单击隐藏 -> 显示）：

还有其他人在使用最新的 chrome 时遇到此问题吗？谢谢！

Answer 1

是的，这是 Chrome 错误。记录在这里：https ://bugs.chromium.org/p/chromium/issues/detail?id=822260 （这就是我找到你的帖子的方式）。