在 Internet Explorer 中调试 CSS 的工具答案

【问题标题】：Tools Debugging CSS in Internet Explorer在 Internet Explorer 中调试 CSS 的工具
【发布时间】：2016-10-24 13:51:05
【问题描述】：

除了 Firebug Lite 之外，是否有其他工具可以帮助人们进入 Internet Explorer 的小脑袋，并准确找出它在哪里以及为什么如此严重地破坏了我的 CSS？

Firebug Lite 当然是一个有用的工具，但它似乎缺少关键功能（存在于“完整”Firebug 插件中），该功能允许您查看哪些声明的哪些部分被忽略以支持其他声明。

例如，使用带有 Firebug 的 Firefox，我可以看到 .foo {color: red} 稍后在样式表中被 .bar {color: blue} 覆盖。

但是，Firebug lite 似乎只显示了最终的计算样式——我不知道哪些声明被忽略，哪些被覆盖，哪些根本不受支持，哪些只是简单的错误。

这里有其他可能有用的工具吗？

【问题讨论】：

标签： css internet-explorer firebug

【解决方案1】：

我正在使用IE8 Developer Tools（开箱即用），它可以显示样式跟踪。

IE7 还提供了 Microsoft 提供的名为 IE Dev Toolbar 的插件。虽然没有广泛使用过。

你用的是什么版本的IE？

【讨论】：

IE Dev Toolbar 是 IE7 的好主意。它远没有 Firebug 强大，但你可以使用你能得到的东西。
@Jeff 或者只是升级到 IE8。
完美——我真的有点惊讶，我以前从未听说过。

【解决方案2】：

是的。在 IE8 中按 F12。在以前的版本中，安装this。

【讨论】：

【解决方案3】：

IE8 附带的开发者工具运行良好。

【讨论】：

【解决方案4】：

我发现jQuery 可以说有助于弄清楚“幕后”发生了什么。例如，我最近遇到了一种情况，我发现我无法信任 IE 8 附带的开发工具（顺便说一下，我在 IE 7 中运行，标准不是怪癖，兼容模式。一些 CSS 属性在除了我遇到的其他 IE 奇怪之外，样式表没有显示为计算的。所以，我只是在页面上扔了一些 javascript，包括 jQuery，这将允许我输入一些代码并对其进行评估而不依赖于IE Developer Tools、Firebug 或 Safari 中的 Web Inspector。您可以评估以下语句：

$('body').css('background-image');

可能会返回：

'/images/default_background.png'

或其他。

YMMV，但值得花时间尝试。

【讨论】：

【解决方案5】：

我不知道它是否有能力检查特定的 css 覆盖，但我会开始 Internet Explorer Developer toolbar

【讨论】：

【解决方案6】：

另一个是Debug Bar。在 IE 7 或 8 中工作；和Firebug类似

【讨论】：

【解决方案7】：

您可以使用我的新工具查看您可以将鼠标悬停的任何元素的布局。

HTML Box Visualizer - GitHub

【讨论】：