谷歌 Chrome 开发者工具没有显示检查的元素样式？答案

【问题标题】：Google Chrome Developer tools not showing inspected elements styles?谷歌 Chrome 开发者工具没有显示检查的元素样式？
【发布时间】：2012-07-16 06:14:39
【问题描述】：

我正在使用谷歌浏览器开发者工具来测试我的网站；

它对某些元素工作正常，但对于其他元素，它显示选择器但显示它没有样式；该元素确实具有样式，并且样式应用于该元素。但检查器没有显示任何样式。

如果我单击指向该检查器的 css 文件行的链接，我可以在那里看到样式。

我看到一个 google 小组主题指出 removing any empty url() declarations 修复了该错误。但是我没有空的url() 声明。

我还找到了this bug which is somewhat similar；但不完全相同。我确实注意到的一件事是，这个错误提供的用例和我的设置都使用了 twitter-bootstrap。我正在使用 .less 版本的引导程序，它将引导程序作为复制 > 粘贴方法包含在单个 css 文件中，因此我的 css 文件有 3740 行。这可能是问题的一部分吗？

元素没有深度嵌套 (body > div#container > inspected element)。
没有过多的样式应用于元素（

Click to enlarge

【问题讨论】：

值是否显示在“计算样式”下？
是的，样式显示在“计算样式”下
也许尝试通过验证器运行您的 css 文件，看看是否有任何错误可能导致这种情况发生，类似于您提到的空 URL 阅读？ jigsaw.w3.org/css-validator

标签： css google-chrome google-chrome-devtools web-inspector

【解决方案1】：

好的，所以我还找到了this bug aswell，它看起来与错误更匹配。
它指出

当 CSS 中存在无法识别的伪类时，DevTools 会中断

twitter-bootstrap 可以做到的！因此，如果您使用 twitter bootstrap（或任何尝试使用特定于供应商的伪类），那么开发工具似乎已损坏。 afaik 解决此问题的唯一方法是等待开发人员解决此错误。

如果有人可以为此发布修复，我会接受他们的回答！

【讨论】：

嗨，我是提出您链接的第一个错误的人。我很确定它和其他错误实际上都在描述相同的潜在问题，这是由 Chrome 在标准 bootstrap.css 的某些方面阻塞引起的。我的错误已被标记为优先级，以包含在里程碑 22（当前的开发里程碑）中，因此希望它不会花费很长时间来修复。同时，也可以使用 Firefox 和 Firebug 来调试你的 CSS。
我现在刚刚恢复到稳定频道，如果您能在此问题修复后在这里发表评论，我们将不胜感激。
在今天的开发频道版本中已修复。
是的，在 22.0.1221.0 开发版中也已修复。
遇到与twitter-bootstrap无关的类似问题，建议您查看javascript文件，尤其是修改css规则。例如，我使用frefix-free.js 来方便供应商前缀，这个脚本更改了我所有的 css 文件。因此 chrome 认为所有的 css 规则都是由你正在查看的 html/php 文件给出的。