javascript - 在 Chrome 中取消焦点之前，li 上的类字体颜色不会呈现

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 中查看代码 ( fiddle here ) 并单击其中一个列表按钮。什么都没发生。但是，如果您取消对窗口的聚焦，它会突然激活该类并呈现红色。

它在 Firefox 中似乎可以正常工作:单击列表项后，它的颜色将切换为红色，其他颜色再次变为蓝色。

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

这里发生了什么？

PS: 在 Windows Prof x64 上使用 33.0.1750.146 m

Answer 1

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