li上的类的字体颜色在Chrome中无焦点之前不会呈现

Question

我在jQuery/CSS中有一个非常奇怪的问题,我不确定这里出了什么问题.考虑这个最小的例子:

#list li {
    color:#3c6174;
    cursor:pointer;
}

#list li.active {
    color:red;
}

<ul id="list">
    <li class="active"></li>
    <li></li>
    <li></li>
</ul>

$buttons = $("#list li");
$buttons.click(function() {
    $buttons.removeClass("active");
    $(this).addClass("active");
});

在Chrome中查看代码(在此处小提琴),然后单击其中一个列表按钮.什么都没发生.但是,如果你不对焦窗口,它会突然激活类并呈现红色.

它似乎在Firefox中工作得很好:一旦单击列表项,它的颜色将切换为红色,其他颜色再次变为蓝色.

查看DOM显示该类被删除并添加到被单击的元素上,没有任何延迟,所以我不明白为什么它不会立即呈现.

这里发生了什么？

PS:33.0.1750.146 m在Windows Prof x64上使用

Answer 1

我认为新版本的Chrome认为如果标签为空，则不需要重新绘制任何内容，唯一的变化是类是文本颜色。在每个 li 元素中放入一个字母即可。或者：放置边框：1px 纯红色；CSS 规则内。它之所以有效，是因为它与元素的框属性有关。