css - Chromium:“显示:列表项”-仅在重新输入此规则后才能工作

我的网站上有一个由<ul>元素组成的导航器：

<div class="navigator">
    <ul>
        <li class="nav-item nav-parent nav-expanded">Category One
            <ul>
                <li class="nav-item nav-parent nav-collapsed">Subcategory One</li>
                <li class="nav-item nav-parent nav-collapsed">Subcategory Two</li>
                <li class="nav-item nav-parent nav-collapsed">Subcategory Three</li>
                <li class="nav-item nav-parent nav-expanded">Subcategory Four
                    <ul>
                        <li class="nav-item nav-expanded">Item 4-1</li>
                        <li class="nav-item nav-selected">Item 4-2</li>
                        <li class="nav-item nav-expanded">Item 4-3</li>
                    </ul>
                </li>
                <li class="nav-item nav-parent nav-collapsed">Subcategory Five</li>
            </ul>
        </li>
        <li class="nav-item nav-collapsed">Category Two</li>
        <li class="nav-item nav-collapsed">Category Three</li>
        <li class="nav-item nav-collapsed">Category Four</li>
    </ul>
</div>

扩展和折叠元素的不同之处在于，css的以下规则将其标记为“ +”或“-”：

li.nav-expanded:before {
    content: "- ";
}
li.nav-collapsed:before {
    content: "+ ";
}

在Firefox中看起来不错：



但是在Chromium中看起来很奇怪：



为什么这么奇怪-因为它在Developer tools中用奇怪的动作修复了：
我选择li.nav-item元素，将display: list-item更改为display:inline并返回到display:list-item。而且看起来还不错。

我不明白，该如何解决？这是Chromium错误吗？

最佳答案

<ul>内的<li>也应为display: list-item。因此：

li.nav-item ul, .navigator ul {
    display: list-item;
}

解决了Chromium中的问题。

关于css - Chromium:“显示:列表项”-仅在重新输入此规则后才能工作，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/8776733/