css - 如果没有继承或直接在元素上设置，是否有任何工具可以显示如何计算 CSS 属性？

Question

如果我有一个 X 像素高的表格单元格，我能看看究竟是什么让它如此——是否是 sibling 的高度 <td>或者它有一个 child div某个高度为 X 像素的地方？

基本上，我有 我想看看为什么它是 172 像素而不是 150 像素。高度从未在代码中明确设置。

某处是否有浏览器扩展程序可以显示此类内容，从而省去单击每个子节点/兄弟节点以检查其 CSS 的麻烦？

编辑:我已经知道大多数浏览器都有内置的 DOM 检查器。然而，并不是所有的 CSS 属性都被继承或直接设置在元素上，正如我在第一段中所说的那样。我想知道是否有更好的工具可以显示属性的计算方式。

Answer 1

没有简单的方法可以缩小导致父元素更改其高度的元素的范围。根据情况，它可以是直接应用于父元素的样式，也可以是一个子元素，或者多个子元素的组合。大多数浏览器都有内置工具或可通过插件使用，这些工​​具有助于更轻松地追踪有问题的样式，但并不十分“容易”。

• 火狐
• 使用 Firebug， 按 F12，确保您在检查器选项卡上，然后单击检查器选项卡左侧带有框的箭头，然后选择元素。样式将显示在右侧，并分割为直接应用的样式和从父元素继承的样式等类别。
• 互联网浏览器
• 按 F12，单击光标图标并选择元素。它将呈现直接应用的样式和继承的样式的 TreeView 。
• 谷歌浏览器
• 按F12，样式显示与Firebug类似。

请注意，在 Firebug 中，当您启用选择工具时，它会勾勒出光标下的元素，并在页面上向您显示该元素的大小(就像您应用了 border: 2px solid blue 样式。它还会在 HTML 检查器中突出显示相应的元素，以便您确切地知道您正在处理的是哪个元素。虽然这不会神奇地说“哦嘿，这个特定的元素和样式是一个给你问题”，这将帮助你更清楚地了解问题。