在Internet Explorer中调试CSS的工具

Question

除了Firebug Lite之外，还有哪些工具可以帮助我们深入了解Internet Explorer的错误行为，并找出CSS被损坏的具体位置和原因呢？

当然，Firebug Lite是一种有用的工具，但它似乎缺少关键功能（在完整的Firebug插件中提供）：即可以看到哪些声明的哪些部分被忽略，而选择了其他声明。

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

但是，Firebug Lite似乎只显示最终计算后的样式，我无法确定哪些声明被忽略，哪些被覆盖，哪些根本不被支持，哪些只是纯粹有问题的。

是否有其他工具可以在这里提供帮助？

- anschauung

Answer 1

我正在使用内置的IE8开发人员工具（IE8 Developer Tools），它可以显示样式追踪。

IE7也有由微软提供的附加组件称为IE Dev Toolbar。尽管我没有广泛使用它。

您正在使用哪个版本的IE?

- Adrian Godong

---

IE Dev Toolbar是IE7的好工具。它远不如Firebug强大，但你得利用现有资源。 - Jeff

@Jeff 或者直接升级到IE8。 - Adrian Godong

完美--我其实有点惊讶我以前从未听说过那个。 - anschauung

Answer 2

是的。在IE8中按F12。在之前的版本中，安装这个。

- i_am_jorf

Answer 3

我发现jQuery在了解“底层情况”方面非常有帮助。例如，最近我遇到一种情况，我发现我无法相信IE 8附带的开发人员工具（顺便说一下，我在IE 7中运行它们，标准而不是怪癖，兼容模式）。在样式表中声明的某些CSS属性未显示为计算属性，除此之外还存在其他IE问题。因此，我只需将一些JavaScript放在页面上，包括jQuery，这将使我能够键入一些代码并对其进行评估，而不必依赖于IE Developer Tools，Firebug或Safari中的Web Inspector。您可以评估这样的语句：

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

可能会返回以下内容：

'/images/default_background.png'

或者其他任何东西。

结果因人而异，但值得花时间尝试。

- rixin

Answer 4

IE8附带的开发者工具非常好用。

- Mara Morton

Answer 5

我不知道它是否具有检查特定CSS覆盖的能力，但我会从Internet Explorer开发者工具栏开始。

- Tim Hoolihan

Answer 6

另一个是Debug Bar。适用于IE 7或8；类似于Firebug

- NotMe

Answer 7

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

HTML Box Visualizer - GitHub

- Gabriel McAdams