Css嵌套计数器与dinamic儿童元素

时间:2018-03-27 15:03:46

标签: css css-counter

我在嵌套菜单中使用css计数器。 而且因为chrome 65奇怪的bug开始发生。 基本上,当儿童菜单项目出现时, 计数器开始泄漏给父母的兄弟元素。

<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/

初始打开页面时查看计数器,这是正确的: enter image description here

这就是当它出现在dinamically时的样子(点击隐藏 - &gt;显示): enter image description here

其他任何遇到过最新Chrome问题的人? 谢谢!

1 个答案:

答案 0 :(得分:0)

是的,这是Chrome Bug。在此处记录:https://bugs.chromium.org/p/chromium/issues/detail?id=822260 (这是我找到您帖子的方式)。