代码之家  ›  专栏  ›  技术社区  ›  anschauung

在Internet Explorer中调试CSS的工具

  •  13
  • anschauung  · 技术社区  · 16 年前

    有没有FirebugLite以外的工具可以帮助人们进入Internet Explorer的小脑袋,准确地找出哪里以及为什么我的CSS会如此严重地损坏?

    当然,Firebug Lite是一个有用的工具,但是它似乎缺少关键的特性(出现在“完整的”Firebug插件中),它允许您查看哪些部分的声明被忽略,而不是其他声明。

    例如,使用firefox和firebug,我可以看到 .foo {color: red} 被覆盖 .bar {color: blue} 在样式表的后面。

    但是,FirebugLite似乎只显示了最终的计算风格——我无法分辨哪些声明被忽略,哪些声明被重写,哪些声明根本不受支持,哪些声明只是简单的错误。

    这里还有其他有用的工具吗?

    7 回复  |  直到 8 年前
        1
  •  20
  •   JasCav    14 年前

    我正在使用 IE8 Developer Tools (包含在框外),它可以显示样式跟踪。

    IE7还提供了Microsoft提供的名为 IE Dev Toolbar . 但还没有广泛使用。

    你用的是什么版本的IE?

        2
  •  6
  •   i_am_jorf    16 年前

    对。在IE8中,点击F12。在以前的版本中,安装 this .

        3
  •  3
  •   Mara Morton    16 年前

    IE8中包含的开发人员工具工作得很好。

        4
  •  3
  •   rixin    15 年前

    我找到了 jQuery 可以说,有助于弄清楚“引擎盖下”发生了什么。例如,最近我发现我不能信任IE8附带的开发工具(顺便说一下,我是在IE7中运行的,标准不是怪癖,兼容模式)。样式表中声明的一些CSS属性没有显示为计算属性,除了我遇到的其他IE异常。所以,我只是在页面上添加了一些javascript,包括jquery,它允许我键入一些代码并对其进行评估,而不依赖于IE开发人员工具、Firebug或Safari中的Web检查器。您可以评估如下语句:

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

    可能会返回:

    '/images/default_background.png'
    

    或者什么。

    YMMV,但值得花时间去尝试。

        5
  •  1
  •   Tim Hoolihan    16 年前

    我不知道它是否有能力检查特定的CSS重写,但我将从 Internet Explorer Developer toolbar

        6
  •  0
  •   ChrisLively    16 年前

    另一个是 Debug Bar . 在IE 7或8中工作;与Firebug类似

        7
  •  0
  •   Gabriel McAdams    8 年前

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

    HTML Box Visualizer - GitHub