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

【问题标题】：Why does the Chrome developer tools computed style show something different from the styles tab?为什么 Chrome 开发人员工具计算样式显示的内容与样式选项卡不同？
【发布时间】：2014-08-23 21:27:30
【问题描述】：

我的 css 中有一个具有 display:none 的类。当我将其应用于 div 时，Chrome 开发人员工具“样式”选项卡显示 display:none，但是，正在显示 div。当我转到“计算”选项卡时，它会显示我的 div 的 display:block。

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

我应该提一下，它没有变灰或变浅的文本，也没有删除线。

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

我尝试将 !important 添加到我的 css 中，但得到了相同的结果。

有什么想法吗？

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

【问题讨论】：

标签： google-chrome gwt developer-tools

【解决方案1】：

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

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

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

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

【讨论】：

你能链接到提交的错误吗？我遇到了同样的问题，并希望跟踪它

【解决方案2】：

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

.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 之外，它将显示：无。但是，如果它在 .scope 内，则每次都会显示：block 因为有更高的特异性。关于特异性的 CSS 技巧有一篇很棒的文章：http://css-tricks.com/specifics-on-css-specificity/

【讨论】：

所以，我没有提到这个类是 GWT 在点击事件之后添加的。这些类在其他浏览器中工作，而不是 Chrome，就像我说的那样，甚至 Chrome 也显示应该选择它。如果我选中/取消选中任何属性，而不仅仅是 display:none，chrome 将重新渲染并正确显示。
可能值得将 GWT 信息添加到问题中！！
您是否在使用 ID 进行样式设置？它仍然可能是一个特异性问题。 ID的权重更高。所以，如果上面的 .scope 是#scope，如果它不是嵌套的 div 组，那肯定会导致问题。如果您使用 ID 进行样式设置，请尝试将其切换到一个类，看看是否能解决问题。
不，它只是类。此外，假设这是一个特异性错误，为什么要取消选中样式选项卡中完全不相关的项目，使用不同的类，然后再次检查该项目会强制 Chrome 更改？例如，我取消选中一个单独类的border-radius样式，然后再次选中它，Chrome就可以正确渲染了。
我试图制作一个 JSFiddle，但当然，它在那里工作得很好。我不知道是否只是所涉及的类的复杂性和数量导致了渲染问题，或者其他浏览器可以使用的代码是否存在实际问题。我不能在这里发布我的实际代码。只能说和这个JSFiddle（jsfiddle.net/z4rMP）差不多，但是不行。