为什么Chrome开发人员工具计算样式显示与样式选项卡不同的内容？

Question

我有一个在我的CSS中有display：none的类。当我将它应用于div时，Chrome开发人员工具＆＃34;样式＆＃34;选项卡显示display：none，但是，正在显示div。当我去＆＃34; Computed＆＃34;选项卡，它显示display：block for my div。

如果我返回样式选项卡，取消选中display：none，然后重新检查它，div就会消失。这似乎是Chrome中的一个错误，但我不确定。

我应该提一下，它不是灰色或较轻的文字，也没有删除线。

此外，它基于GWT中的click事件，该类被添加到一个div并从另一个div中删除。

我尝试添加！对我的css很重要，但我得到的结果相同。

有什么想法吗？

以下是Chrome开发者工具的一些屏幕截图：

Answer 1

这可能与特异性有关。例如，如果您在样式表中的其他位置确定类，那么它将具有比“裸”类更高的特异性。

.scope .myclass {
  display: block;
}

.myclass {
  display: none;
}

// .myclass will be displayed
<div class="scope">
  <div class="myclass">...</div>
</div>

// .myclass will not be displayed
<div class="myclass">...</div>

如果.myclass div在.scope之外，它将显示：none。但是，如果它在.scope中，它会显示：每次都阻塞，因为有更高的特异性。关于特异性的CSS技巧有一篇很好的文章：http://css-tricks.com/specifics-on-css-specificity/

Answer 2

不确定实际问题是什么（向Chrome提交了一个错误），但这里找到了几个解决方案：

How can I force WebKit to redraw/repaint to propagate style changes?

我选择了这个，一切正常：

$('#foo').css('display', 'none').height();
$('#foo').css('display', 'block');